8种vue组件通信方式详细解析实例

vue1.0中提供了这种方法，但vue2.0中没有，但许多开源软件都本身封装了这种方法，好比min ui、element ui和iview等。 好比如下代码，一样平常都作为一个mixins去行使, broadcast是向特定的父组件，触发变乱，dispatch是向特定的子组件触发变乱，本质上这种方法照旧on和on和emit的封装，但在一些基本组件中却很适用。

function broadcast(componentName, eventName, params) { 
 this.$children.forEach(child => { 
 var name = child.$options.componentName; 
 if (name === componentName) { 
 child.$emit.apply(child, [eventName].concat(params)); 
 } else { 
 broadcast.apply(child, [componentName, eventName].concat(params)); 
 } 
 }); 
} 
export default { 
 methods: { 
 dispatch(componentName, eventName, params) { 
 var parent = this.$parent; 
 var name = parent.$options.componentName; 
 while (parent && (!name || name !== componentName)) { 
 parentparent = parent.$parent; 
 if (parent) { 
 name = parent.$options.componentName; 
 } 
 } 
 if (parent) { 
 parent.$emit.apply(parent, [eventName].concat(params)); 
 } 
 }, 
 broadcast(componentName, eventName, params) { 
 broadcast.call(this, componentName, eventName, params); 
 } 
 } 
}; 

8. vuex处理赏罚组件之间的数据交互

假如营业逻辑伟大，许多组件之间必要同时处理赏罚一些民众的数据，这个时辰才有上面这一些要领也许倒霉于项目标维护，vuex的做法就是将这一些民众的数据抽离出来，然后其他组件就可以对这个民众数据举办读写操纵，这样到达相识耦的目标。

【编辑保举】

1. Vue处事端渲染实践 ——Web应用首屏耗时最优化方案
2. JS框架比拟，Angular照旧Vue相宜才最好
3. Vue行使能力和项目中碰着的题目
4. Vue.js的留意事项与能力
5. Vue UI：Vue 开拓者必不行少的器材

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!