子组件调用父组件方法并传递参数
时间: 2023-11-03 14:59:44 浏览: 46
子组件可以通过在父组件上使用`$emit`来调用父组件的方法并传递参数。在父组件中,你可以在`<child>`标签上监听`@emit`事件,并在事件处理程序中调用父组件的方法。例如,在父组件中,你可以这样做:
父组件father.vue:
```
<template>
<div>
<child @emit="emit" :emit="emit"></child>
</div>
</template>
<script>
import child from "./child.vue";
export default {
components: {
child,
},
methods: {
emit(v1, v2, v3) {
alert(`${v1}\n${v2}\n${v3}`);
// 调用父组件的方法,并传递参数
},
},
};
</script>
```
在子组件中,你可以通过`this.$emit('emit', 参数1, 参数2, 参数3)`来触发父组件的`emit`方法,并传递参数。例如,在子组件中,你可以这样做:
子组件child.vue:
```
<template>
<div>
<button @click="handleClick">调用父组件方法</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
// 触发父组件的emit方法,并传递参数
this.$emit('emit', '参数1', '参数2', '参数3');
},
},
};
</script>
```
这样,当子组件中的按钮被点击时,父组件的`emit`方法将会被调用,并弹出子组件传递的参数。