vue 调用子组件方法

vue 调用子组件方法
在Vue 中，可以通过ref 属性来调用子组件的方法。

首先，在子组件中使用ref 属性进行标记：
<template>
<div>
<!-- ... -->
</div>
</template>
<script>
export default {
// ...
methods: {
myMethod() {
// ...
}
},
mounted() {
console.log(this.$refs.myRef);
},
// ...
}
</script>
然后，在父组件中使用$refs 对象来访问子组件的实例，例如调用方法
<template>
<div>
<Child ref="myRef" />
</div>
</template>
<script>
import Child from'./Child.vue'
export default {
components:{
Child
},
methods: {
callChildMethod() {
this.$refs.myRef.myMethod()
}
}
}
</script>
然后，在父组件中调用子组件的方法可以使用上面的`callChildMethod()` 方法，例如在按钮的点击事件中调用。

<template>
<div>
<Child ref="myRef" />
<button@click="callChildMethod">Call Child Method</button>
</div>
</template>
请注意,调用子组件方法之前，组件必须已经挂载完成，如果需要在组件创建前调用，需要使用$nextTick 或者Vue.nextTick 等方法来等待组件实例创建完成。

mounted() {
this.$nextTick(() => {
this.$refs.myRef.myMethod()
})
}
还有一个方法是在父组件中定义一个prop 传递给子组件，子组件通过watch 监听这个prop，进而调用相应的方法.。