Vue项目中非父子组件怎么通过路由跳转实现页面间函数的传递
时间: 2024-11-12 19:33:28 浏览: 6
Vue2.0父子组件传递函数的教程详解
5星 · 资源好评率100%
在Vue.js项目中,非父子组件之间的通信通常需要借助于Vuex store、事件总线(Event Bus)或者自定义属性($attrs/$on)。这里以事件总线为例讲解:
1. **事件总线** (Event Bus):创建一个全局的Vue实例或者单独的EventEmitter(如vue-eventbus库),非父子组件可以通过发布(emit)和监听(on)事件的方式传递数据和触发函数。例如:
```javascript
// 创建事件总线
const eventBus = new EventBus();
// 父组件发射事件
eventBus.$emit('navigate-to-child', { data: 'fromParent' });
// 子组件监听事件
export default {
methods: {
handleNavigation(event) {
this.handleFunctionFromParent(event.data);
}
},
mounted() {
eventBus.$on('navigate-to-child', this.handleNavigation);
},
beforeDestroy() {
eventBus.$off('navigate-to-child', this.handleNavigation);
}
};
```
2. **Vuex**:如果数据需要长期保存并支持状态管理,可以将函数放在store的actions里,通过`dispatch`触发。
3. **自定义属性**:利用Vue的特性,在非父子组件之间共享数据或函数,比如通过`v-bind="$parent.someFunction"`绑定到父组件的函数。
注意:
阅读全文