vue2父组件调用子组件函数
时间: 2023-11-03 09:52:16 浏览: 108
在Vue 2中,父组件可以通过使用`ref`属性来引用子组件的实例,并直接调用子组件的方法。以下是一个示例:
首先,在父组件中给子组件添加ref属性:
```html
<template>
<div>
<child-component ref="childRef"></child-component>
<button @click="callChildMethod">调用子组件方法</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
callChildMethod() {
this.$refs.childRef.childMethod();
}
}
}
</script>
```
然后,在子组件中定义一个需要被调用的方法:
```html
<template>
<div>
子组件内容
</div>
</template>
<script>
export default {
methods: {
childMethod() {
console.log('子组件方法被调用');
}
}
}
</script>
```
在父组件中,我们使用`$refs`来获取子组件的引用,并通过`childMethod()`来调用子组件的方法。
阅读全文