vue组件通信一provide inject

组件的通信 1：provide / inject

vue提供的API，ref 和 $parent / $children 在跨级通信时是有弊端的。为了解决这种跨级通信情况，我们往往会借助Bus和Vuex这些第三方库。但我们还可以借用vue 内置的 provide / inject 接口，实现无依赖的组件通信。

provide / inject

provide / inject 是 Vue.js 2.2.0 版本后新增的 API，在文档中这样介绍：

https://cn.vuejs.org/v2/api/#provide-inject

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。这与 React 的上下文特性context很相似。
官网提示provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。不过建议归建议，如果你用好了，这个 API 会非常有用。

假设有两个组件： A.vue 和 B.vue，B 是 A 的子组件。

// A.vue
export default {
  provide: {
    name: 'Aresn'
  }
}

// B.vue
export defaul {
  inject: ['name'],
  mounted(){
    console.log(this.name) // Aresn
  }
}

在 A.vue 里，我们设置了一个 provide: name，值为 Aresn，它的作用就是将 name 这个变量提供给它的所有子组件。而在 B.vue 中，通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，就可以直接通过 this.name 访问这个变量了，它的值也是 Aresn。这就是 provide / inject API 最核心的用法。

需要注意的是：

provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象,具体参照https://segmentfault.com/a/1190000019836663，那么其对象的属性还是可响应的。

所以，上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是 Aresn。

替代 Vuex

在做 Vue 大型项目时，可以使用 Vuex 做状态管理，它是一个专为 Vue.js 开发的状态管理模式，用于集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

那了解了 provide / inject 的用法，下面来看怎样替代 Vuex。

使用 Vuex，最主要的目的是跨组件通信、全局数据维护、多人协同开发。需求比如有：用户的登录信息维护、通知信息维护等全局的状态和数据。

一般在 webpack 中使用 Vue.js，都会有一个入口文件 main.js，里面通常导入了 Vue、VueRouter、iView 等库，通常也会导入一个入口组件 app.vue 作为根组件。一个简单的 app.vue 可能只有以下代码：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {

  }
</script>

使用 provide / inject 替代 Vuex，就是在这个 app.vue 文件上做文章。

app.vue 理解为一个最外层的根组件，用来存储所有需要的全局数据和状态，甚至是计算属性（computed）、方法（methods）等。因为项目中所有的组件（包含路由），它的父组件（或根组件）都是 app.vue，所以我们把整个 app.vue 实例通过 provide 对外提供。任何子组件通过injec注入app就可以直接通过this.app来访问根组件app.vue这个实例。

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  provide(){
    return {
      app: this
    }
  },
  data(){
    return {

    }
  },
  methods:{
  }
}
</script>
<style lang="less" >

</style>

并且app.vue是项目的根组件，只会渲染一次（即使切换路由，app.vue也不会重新渲染），所有app.vue很适合存储一些全局的状态数据并且管理，如用户的登录信息。

app.vue，部分代码省略：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  provide() {
    return {
      app: this
    };
  },
  data() {
    return {
      userInfo: null
    };
  },
  methods: {
    getUserInfo() {
      // 这里通过 ajax 获取用户信息后，赋值给 this.userInfo，以下为伪代码
      $.ajax("/user/info", data => {
        this.userInfo = data;
      });
    }
  },
  mounted() {
    this.getUserInfo();
  }
};
</script>
<style lang="less" >
</style>

这样，任何页面或组件，只要通过 inject 注入 app 后，就可以直接访问 userInfo 的数据了。

<template>
  <div>
    {{ app.userInfo }}
  </div>
</template>
<script>
  export default {
    inject: ['app']
  }
</script>

也可以调用app根组件实例方法，修改用户信息。

某个页面：

<template>
  <div>
    {{ app.userInfo }}
  </div>
</template>
<script>
  export default {
    inject: ['app'],
    methods: {
      changeUserInfo () {
        // 这里修改完用户数据后，通知 app.vue 更新，以下为伪代码
        $.ajax('/user/update', () => {
          // 直接通过 this.app 就可以调用 app.vue 里的方法
          this.app.getUserInfo();
        })
      }
    }
  }
</script>

进阶技巧

如果项目足够复杂，在 app.vue 里会写非常多的代码，多到结构复杂难以维护。这时可以使用 Vue.js 的混合 mixins，将不同的逻辑分开到不同的 js 文件里。比如上面的用户信息，就可以放到混合里：

user.js

export default {
  data() {
    return {
      userInfo: null
    }
  },
  methods: {
    getUserInfo() {
      // 这里通过 ajax 获取用户信息后，赋值给 this.userInfo，以下为伪代码
      $.ajax('/user/info', (data) => {
        this.userInfo = data;
      });
    }
  },
  mounted() {
    this.getUserInfo();
  }
}

然后在 app.vue 中混合：

app.vue

<script>
  import mixins_user from '../mixins/user.js'

  export default {
    mixins: [mixins_user],
    data() {
      return {

      }
    }
  }
</script>

如果使用vue 内置的API $parent 来获取组件的多层上级组件实例，可以借助计算属性：

computed: {
  form() {
    let parent = this.$parent;
    while(parent.$options.name !== 'Form' ){
      parent = parent.$parent;
    }
    return parent
  }
}

前提，每个组件都可以设置 name 选项，作为组件名的标识，利用这个特点，通过向上遍历，直到找到需要的组件。