vue3 子组件调用父组件并传递参数方法
时间: 2023-10-31 07:59:40 浏览: 73
在Vue 3中,子组件可以通过使用`this.$emit`方法来触发父组件的函数并传递参数。你可以在子组件的方法中使用`this.$emit`来触发父组件的函数,同时传递参数。具体的代码示例如下所示:
```html
<template>
<div>
<button @click="childFun">子组件按钮</button>
</div>
</template>
<script>
export default {
name: "child",
methods: {
childFun() {
this.$emit("fatherMethod", "子组件数据");
}
}
};
</script>
```
在父组件中,你可以通过在子组件上使用`@fatherMethod`来监听子组件触发的事件,并在父组件中定义相应的方法来接收子组件传递的参数。具体的代码示例如下所示:
```html
<template>
<div>
父组件
<child @fatherMethod="parentFun"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
name: "parent",
components: {
child,
},
methods: {
parentFun(cdata) {
console.log(cdata, "cdata");
}
}
};
</script>
```
这样,当子组件中的按钮被点击时,子组件会通过`this.$emit`触发父组件的`fatherMethod`方法,并将"子组件数据"作为参数传递给父组件的`parentFun`方法进行处理。