在uniapp中父组件调用子组件的方法
时间: 2024-09-04 09:02:36 浏览: 183
在UniApp中,父组件想要调用子组件的方法,通常通过props和事件总线(Event Bus)两种方式进行。
1. **Props传递**:
父组件可以将需要的方法名作为属性传递给子组件,然后在子组件内部通过`this.$parent`访问到父组件,并调用该方法。例如:
```vue
<template>
<child-component :callMe="myMethod" />
</template>
<script>
export default {
methods: {
myMethod() {
// 父组件的逻辑
}
}
}
</script>
```
子组件接收这个方法并调用它:
```vue
<template>
<button @click="parentCall">点击调用父方法</button>
</template>
<script>
export default {
methods: {
parentCall() {
this.callMe(); // 调用传入的父方法
},
callMe() {
// 子组件内部直接调用传入的方法
}
}
}
</script>
```
2. **事件总线(Event Bus)**:
如果父子组件间通信更复杂,可以使用全局的Vue实例作为事件总线。父组件触发事件,子组件监听并响应。比如:
- 创建一个自定义事件总线:
```javascript
import bus from '@/utils/bus';
bus.$on('invokeChildMethod', data => {
this.myMethod(data);
});
```
- 子组件触发事件:
```vue
<button @click="emitParentMethod">触发父方法</button>
<script>
export default {
methods: {
emitParentMethod() {
bus.$emit('invokeChildMethod', '参数');
},
myMethod(data) {
// ...处理数据
}
}
}
</script>
```
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.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)
![](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)