子组件调用父组件的方法
时间: 2023-10-06 10:14:02 浏览: 79
ES6下子组件调用父组件的方法(推荐)
5星 · 资源好评率100%
子组件可以通过 `this.$emit` 方法向父组件发送一个自定义事件,并将需要传递给父组件的数据作为参数传递。父组件可以通过在模板中使用 `v-on` 或 `@` 监听子组件触发的自定义事件,并定义相应的处理函数来响应子组件传递的数据。在处理函数中,可以调用父组件中的方法来完成具体的操作。例如:
子组件中:
```
<button @click="handleClick">点击</button>
methods: {
handleClick() {
this.$emit('custom-event', 'hello');
}
}
```
父组件中:
```
<child @custom-event="handleCustomEvent"></child>
methods: {
handleCustomEvent(message) {
console.log(message); // 输出 'hello'
// 调用父组件中的方法
this.parentMethod();
},
parentMethod() {
console.log('父组件中的方法被调用了!');
}
}
```
阅读全文