vue注入组件_组件通信:在独立组件中使用provide与inject模拟跨组件vuex,Bus

上一篇中我们说到&＃xff0c;ref 和 $parent / $children在跨级通信时是有弊端的。当组件 A 和组件 B 中间隔了数代(甚至不确定具体级别)时&＃xff0c;以往会借助 Vuex 或 Bus 这样的解决方案&＃xff0c;不得不引入三方库来支持。本文介绍一种无依赖的组件通信方法&＃xff1a;Vue.js 内置的 provide / inject 接口。

provide / inject 是 Vue.js 2.2.0 版本后新增的 API&＃xff0c;文档中有如下提示&＃xff1a;

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

就是说 Vue.js 不建议在业务中使用这对 API&＃xff0c;而是在插件 / 组件库(比如 iView&＃xff0c;事实上 iView 的很多组件都在用)。

我们先来看一下这个 API 怎么用&＃xff0c;假设有两个组件&＃xff1a; A.vue 和 B.vue&＃xff0c;B 是 A 的子组件。

// A.vueexport default { provide: { name: &＃39;Aresn&＃39; }}// B.vueexport default { inject: [&＃39;name&＃39;], mounted () { console.log(this.name); // Aresn }}

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

需要注意的是&＃xff1a;provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而&＃xff0c;如果你传入了一个可监听的对象&＃xff0c;那么其对象的属性还是可响应的。

所以&＃xff0c;上面 A.vue 的 name 如果改变了&＃xff0c;B.vue 的 this.name 是不会改变的&＃xff0c;仍然是 hello。

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

那了解了 provide / inject 的用法&＃xff0c;下面来看怎样替代 Vuex。当然&＃xff0c;我们的目的并不是为了替代 Vuex&＃xff0c;它还是有相当大的用处&＃xff0c;这里只是介绍另一种可行性。

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

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

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

我们把 app.vue 理解为一个最外层的根组件&＃xff0c;用来存储所有需要的全局数据和状态&＃xff0c;甚至是计算属性(computed)、方法(methods)等。因为你的项目中所有的组件(包含路由)&＃xff0c;它的父组件(或根组件)都是 app.vue&＃xff0c;所以我们把整个 app.vue 实例通过 provide 对外提供。

app.vue&＃xff1a;

上面&＃xff0c;我们把整个 app.vue 的实例 this 对外提供&＃xff0c;命名为 app(这个名字可以自定义&＃xff0c;推荐使用 app&＃xff0c;使用这个名字后&＃xff0c;子组件不能再使用它作为局部属性)。接下来&＃xff0c;任何组件(或路由)只要通过 inject 注入 app.vue 的 app 的话&＃xff0c;都可以直接通过 this.app.xxx 来访问 app.vue 的 data、computed、methods 等内容。

app.vue 是整个项目第一个被渲染的组件&＃xff0c;而且只会渲染一次(即使切换路由&＃xff0c;app.vue 也不会被再次渲染)&＃xff0c;利用这个特性&＃xff0c;很适合做一次性全局的状态数据管理&＃xff0c;例如&＃xff0c;我们将用户的登录信息保存起来&＃xff1a;

app.vue&＃xff0c;部分代码省略&＃xff1a;

这样&＃xff0c;任何页面或组件&＃xff0c;只要通过 inject 注入 app 后&＃xff0c;就可以直接访问 userInfo 的数据了&＃xff0c;比如&＃xff1a;

是不是很简单呢。除了直接使用数据&＃xff0c;还可以调用方法。比如在某个页面里&＃xff0c;修改了个人资料&＃xff0c;这时一开始在 app.vue 里获取的 userInfo 已经不是最新的了&＃xff0c;需要重新获取。可以这样使用&＃xff1a;

某个页面&＃xff1a;

同样非常简单。只要理解了 this.app 是直接获取整个 app.vue 的实例后&＃xff0c;使用起来就得心应手了。想一想&＃xff0c;配置复杂的 Vuex 的全部功能&＃xff0c;现在是不是都可以通过 provide / inject 来实现了呢&＃xff1f;

如果你的项目足够复杂&＃xff0c;或需要多人协同开发时&＃xff0c;在 app.vue 里会写非常多的代码&＃xff0c;多到结构复杂难以维护。这时可以使用 Vue.js 的混合 mixins&＃xff0c;将不同的逻辑分开到不同的 js 文件里。

比如上面的用户信息&＃xff0c;就可以放到混合里&＃xff1a;

user.js&＃xff1a;

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

然后在 app.vue 中混合&＃xff1a;

app.vue&＃xff1a;

这样&＃xff0c;跟用户信息相关的逻辑&＃xff0c;都可以在 user.js 里维护&＃xff0c;或者由某个人来维护&＃xff0c;app.vue 也就很容易维护了。

如果你顾忌 Vue.js 文档中所说&＃xff0c;provide / inject 不推荐直接在应用程序中使用&＃xff0c;那没有关系&＃xff0c;仍然使用你熟悉的 Vuex 或 Bus 来管理你的项目就好。我们介绍的这对 API&＃xff0c;主要还是在独立组件中发挥作用的。

只要一个组件使用了 provide 向下提供数据&＃xff0c;那其下所有的子组件都可以通过 inject 来注入&＃xff0c;不管中间隔了多少代&＃xff0c;而且可以注入多个来自不同父级提供的数据。需要注意的是&＃xff0c;一旦注入了某个数据&＃xff0c;比如上面示例中的 app&＃xff0c;那这个组件中就不能再声明 app 这个数据了&＃xff0c;因为它已经被父级占有。

独立组件使用 provide / inject 的场景&＃xff0c;主要是具有联动关系的组件。