vue3组合式中 子组件调用父组件方法
时间: 2024-08-16 08:06:53 浏览: 35
在 Vue 3 中,尤其是使用 Composition API 的情况下,如果你想要在子组件中调用父组件的方法,你可以通过 prop 钩子、自定义事件或者在子组件内直接访问实例的 `$parent` 对象来实现。以下是三种常见的做法:
1. **通过 Prop 钩子**:
如果父组件暴露了你需要调用的方法作为 prop,那么可以在子组件的 `setup` 函数里接收这个方法并调用它:
```javascript
// 父组件
export default {
methods: {
myMethod() {
// ...
}
},
props: ['callParentMethod'],
};
// 子组件
import { onMounted } from 'vue';
setup(props) {
onMounted(() => {
props.callParentMethod();
});
}
```
2. **通过自定义事件(emit)**:
父组件可以发射一个事件,然后子组件监听并触发该方法:
```javascript
// 父组件
emits(['parentMethod']);
...
this.$emit('parentMethod', arg);
// 子组件
import { on, watch } from 'vue';
on(this.$parent, 'parentMethod', (arg) => {
// 调用父方法
});
```
3. **直接访问 $parent**(仅适用于非父子复用的情况):
使用 `$parent` 可以直接访问当前组件的父组件实例,但请注意这会破坏组件间的隔离性,通常只推荐在生命周期钩子等特殊场合使用:
```javascript
// 子组件
const callParentMethod = () => {
this.$parent.myMethod();
};
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)