vue中父组件如何调用子组件时间
时间: 2023-11-03 08:19:57 浏览: 109
在Vue中,父组件可以通过使用`ref`来调用子组件的方法和访问子组件的属性。下面是一个示例:
```vue
<template>
<div>
<ChildComponent ref="childComponent"></ChildComponent>
<button @click="callChildComponentMethod">调用子组件方法</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
callChildComponentMethod() {
this.$refs.childComponent.childMethod(); // 调用子组件的方法
}
}
}
</script>
```
在上面的示例中,父组件中引入了一个名为 ChildComponent 的子组件。通过使用`ref`属性,我们可以将子组件的实例赋值给父组件的实例中的一个属性(在示例中是`childComponent`)。通过`this.$refs.childComponent`,父组件就可以访问子组件的方法和属性了。
在点击按钮时,我们调用了父组件的`callChildComponentMethod`方法,该方法内部通过`this.$refs.childComponent.childMethod()`来调用子组件的名为`childMethod`的方法。
这样就实现了父组件调用子组件的方法。
阅读全文