Vue父组件调用子组件的方法

vue中如果父组件想调用子组件的方法，可以在子组件中加上ref，然后通过this.$refs.ref.method调用，例如：

父组件：

<template>
<div @click=”fatherMethod”>
<child ref=”child”></child>
</div>
</template>
<script>
import child from ‘~/components/dam/child.vue’;
export default {
components: {
child
},
methods: {
fatherMethod() {this.$refs.child.childMethods();
}
}
};
</script>
子组件：

<template>
<div>{{name}}</div>
</template>
<script>
export default {
data() {
return {
name: ‘测试’
};
},
methods: {
childMethods() {
console.log(this.name);
}
}
};
</script>
在父组件中， this.$refs.child 返回的是一个vue实例，可以直接调用这个实例的方法

————————————————
版权声明：本文为CSDN博主「web码到功成」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wbdisb/article/details/124278817