vue组件通信与常用技巧分享

一、vue组件通信背景

组件是vue.js 最强大功能之一，组件的作用域是相互独立的，这就意味着不同组件之间的数据是无法相互引用，所以就有了各种组件通信方式。

不管啥样的通信方式，都逃离不了上图的各种关系(树)。 A和B、B和C、B和D 都是父子关系，C与D 是兄弟关系，A与C、A与D 是隔代关系（多代）。

二、多种实用组件通信方式

1、父子通信 - 通过prop 向子组件传递数据

父组件演示代码

      <section>
        <p>通信方式1 <button @click="addIndex">点击父组件修改index</button></p><br/>
        <Signal1 :index="indexVal" :randomVal="randomVal"></Signal1>
      </section>

子组件演示代码

当隔代（多代）的关系需要进行props传递的时候，一个个对应好像很麻烦、也很难扩展，可以尝试用一次性传递。
如 A --> B --> C --> D
看下Demo。通过如下v-bind="$props" 进行绑定

// 大致如下：
  computed: {
    contData() {
      return this.$attrs.contData
    },
    ruleExplain() {
      return this.$attrs.ruleExplain
    }
  },

其实，不管是一个个添加、还是$props,这种隔代方式通信都是比较麻烦的

2、子父通信 - 通过$on和$emit

父组件通过v-on:fn=”xx”来设置监听，子组件通过$emit('fn') 来触发。另外，在vueTool event 可以查看emit 事件

注意，prop 是单向数据流的，不要在子组件里直接修改props中的对象数据。

3、万能通信 - 通过provide/inject传递数据

tips: provide/inject 是vue.js 2.2.0 版本之后新增的API。

4、万能通信 - 通过bus方式传递数据

原理就是使用一个空的Vue实例作为中央事件总线。

注意：
1、事件订阅需在事件广播前注册。
2、并且在组件销毁前，需取消事件订阅

5、万能通信 - 通过查找任意组件形式传递数据

查找组件可能的场景：

由一个组件，向上找到最近的指定组件。
由一个组件，向上找到所有的指定组件。
由一个组件，向下找到最近的指定组件。
由一个组件，向下找到所有指定的组件。
由一个组件，找到指定组件的兄弟组件。

比如：

注意：组件需取好name,不然是找不到的。这种通信方式在功能独立组件会使用很多。
比如 iview 具体的工具函数查看 iview 里的源码源码

// Find components upward
function findComponentUpward (context, componentName, componentNames) {
    if (typeof componentName === 'string') {
        componentNames = [componentName];
    } else {
        componentNames = componentName;
    }

    let parent = context.$parent;
    let name = parent.$options.name;
    while (parent && (!name || componentNames.indexOf(name) < 0)) {
        parent = parent.$parent;
        if (parent) name = parent.$options.name;
    }
    return parent;
}
export {findComponentUpward};

6、终极通信 - 使用vuex状态管理工具

依照项目规模，看是否合理采用vuex。
vuex

三、实用技巧分享

1、vscode 快速查找、替换。

利用ctrl + shift + f ctrl + shift + h。利用include、exclude来快速定位查找内容，htdocs包含太多输出内容，影响查看。

2、vscode 保存自动eslint格式化。

屡试不爽，如果还不行，再重新来几次。

3、devTools 实用快捷键。

利用devtool提供的copy 实现快速复制。
ctrl + shift + d 快速切换视窗左右位置。
ctrl + shift + p 快速打开命名包含一些隐藏的功能。（theme, ftp,screen）
? === Array.from(document.querySelectorAll('div')) 快速选择dom。
$0 快速选择dom。

tips: vue 的devTool 也有对应的$vm0、$vm1。

3-5年内部岗位（平安、乐信、500万、vivo、oppo）推荐机会，欢迎发简历到： zgxie@126.com