Vue 父组件如何触发子组件中的方法

子组件

<template>
  <div>
    child
  </div>
</template>
 
<script>
  export default {
    name: "child",
    props: "someprops",
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
</script>

父组件

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>
  </div>
</template>
 
<script>
  import Child from './child';
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      // this.$refs.mychild.parentHandleclick("")
      clickParent() {
        this.$refs.mychild.parentHandleclick("我是父组件点击触发的");
      }
    }
  }
</script>

1. 首先父组件导入子组件并且在 components 中定义子组件

2. 引用子组件，并定义ref，用于 this.$refs.mychild 调用

3. 调用子组件的方法（parentHandleclick() 为子组件的方法）

注：在调用子组件的方法时（this.$refs.mychild.parentHandleclick()方法），出现了parentHandleclick未定义的异常

这个问题出现是因为我没有得到子组件的实例，所以调用的时候出现了undefined异常。子组件没有在页面初始化时加载，而是在点击某个特定的按钮后才开始显示加载。

子组件初始化的后就立马执行调用子组件的方法，可能他还没有初始化完成，所以出现了 undefined 的异常。

所以在调用子组件方法时，稍做一下延时处理：

setTimeout(() => {
    this.$refs.mychild.parentHandleclick()
}, 10)

Vue 父组件如何触发子组件中的方法

推荐阅读