父组件调用子组件的方法 vue
时间: 2024-01-07 08:23:35 浏览: 67
vue 父组件中调用子组件函数的方法
5星 · 资源好评率100%
在Vue中,父组件调用子组件的方法可以通过使用`ref`来实现。下面是一个示例:
```html
<template>
<div>
<ChildComponent ref="childRef"></ChildComponent>
<button @click="callChildMethod">调用子组件方法</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
callChildMethod() {
this.$refs.childRef.childMethod();
}
}
}
</script>
```
在上面的示例中,父组件通过`ref`给子组件命名为`childRef`,然后在父组件的方法`callChildMethod`中通过`this.$refs.childRef`来调用子组件的方法`childMethod()`。
需要注意的是,子组件的方法必须在子组件的`methods`中定义,并且要在子组件的`export default`中进行导出。
阅读全文