vue2父组件调用子组件得方法
时间: 2024-10-15 18:04:17 浏览: 17
vue 父组件中调用子组件函数的方法
在Vue 2中,父组件想要调用子组件的方法通常有两种方式:
1. **通过props传递事件**:如果子组件需要暴露一个方法供父组件调用,可以将这个方法作为prop传递给子组件。当子组件触发这个方法时,它会作为一个自定义事件向上冒泡,父组件可以在`v-on`指令上监听这个事件。
```html
<!-- 父组件 -->
<child-component @customMethod="handleCustomMethod"></child-component>
<script>
export default {
methods: {
handleCustomMethod(data) {
// 在这里处理来自子组件的数据
}
}
}
</script>
```
2. **通过ref引用子组件实例**:父组件可以创建一个ref来引用子组件实例,并直接调用其提供的方法。这种方法适合于需要直接操作子组件状态的情况。
```html
<!-- 父组件 -->
<child-component ref="myChildComponent"></child-component>
<script>
export default {
mounted() {
this.$refs.myChildComponent.doSomething();
}
}
</script>
```
在上述例子中,`doSomething`是子组件内部公开的方法名。
阅读全文