uniapp 父页面调用子组件方法
时间: 2024-09-29 16:11:17 浏览: 57
在 UniApp 开发中,如果你想要从父组件调用子组件的方法,可以采用以下几种方式:
1. **通过 prop 传递事件**:父组件可以将事件名作为 prop 传给子组件,然后在子组件内部监听这个事件。当子组件准备好执行特定方法时,触发这个事件并将方法名、参数一起发送。
```javascript
// 父组件
<child-component @customEvent="callMethod"></child-component>
// 子组件
methods: {
handleCustomAction() {
this.$emit('customEvent', 'methodName', arguments);
}
}
```
2. **自定义事件 (EventBus)**:创建一个全局的 EventHub,让父组件和子组件都可以订阅和发布事件。在子组件上调用方法时,通过 EventBus 发布事件,父组件捕获并调用相应的回调。
3. **父子通信插件**:如 uView 中的 `u-modal` 插件提供了一个内置的通信机制,可以在父子组件间直接传递方法调用。
4. **ref 和 methods 调用**:若子组件有公开的 method,父组件可以在 `mounted` 钩子中通过 `this.$refs.childComponent.methodName(args)` 来调用。
记得,无论哪种方式,都需要保证子组件的实例已存在并且方法可以被调用。同时注意,性能方面,频繁的父子组件间的通信可能会影响应用性能,所以在设计时要考虑合理性。
阅读全文