vue3子组件如何调用父组件的方法
时间: 2023-11-29 18:45:34 浏览: 29
在Vue3中,子组件可以通过props属性接收父组件传递的方法,然后在子组件中调用该方法。具体实现方式如下:
1. 父组件定义供子组件调用的方法,并将该方法作为props属性传递给子组件。
```vue
template>
<div>
<ChildComponent :parentMethod="parentMethod" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
parentMethod() {
console.log('This is a method in parent component.');
}, },
};
</script>
```
2. 子组件中通过props属性接收父组件传递的方法,并在需要的时候调用该方法。
```vue
<template>
<div>
<button @click="callParentMethod">Call Parent Method</button>
</div>
</template>
<script>
export default {
props: {
parentMethod: {
type: Function,
required: true,
},
},
methods: {
callParentMethod() {
this.parentMethod();
},
},
};
</script>
```
在上述代码中,子组件通过props属性接收了父组件传递的parentMethod方法,并在按钮的点击事件中调用该方法。