Vue通过provide inject实现组件通信

2023-07-17 06:33:03 184

provide/inject是Vue.js2.2.0版本后新增的API：

provide：Object|()=>Object//一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject：Array|{[key:string]:string|Symbol|Object}//一个字符串数组，或一个对象

虽然官方文档说，provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中，但是在插件/组件库（比如iView，事实上iView的很多组件都在用）。不过建议归建议，如果你用好了，这个API会非常有用。

这对选项需要一起使用，以允许一个祖先组件向其所有的子孙后代注入一个依赖，不论组件的层次有多深，并在起上下游关系成立的时间里始终生效。

注意：provide和inject绑定并不是可响应的。这显然不是设计的失误，而是刻意的。

下面我们来看一看它最简单的用法：

//祖先级组件（上级组件）

//子孙级组件（下级组件）

我们在上级组件中设置了一个provide：foo，值为test，它的作用就是将foo这个变量提供给它的所有下级组件。而在下级组件中通过inject注入了从上级组件中提供的foo变量，那么在下级组件中，就可以直接通过this.foo来访问了。

再次强调一遍，provide和inject绑定并不是可响应的，所以上述例子中上级组件的foo改变了,下级组件的this.foo的值还是不会改变的。

我们一般会在main.js中导入app.vue作为根组件，我们需要在app.vue上做文章，这就是我们实现功能的关键。我们可以这样理解：app.vue作为一个最外层的根组件，用来存储所有需要的全局数据和状态。因为项目中的所有组件（包含路由），它的父组件（或根组件）都是app.vue，所有我们可以把整个app.vue实例通过provide对外提供。那么，所有的组件都能共享其数据，方法等。

上面，我们把整个app.vue的实例`this`对外提供，接下来，任何组件（或路由）只要通过`inject`注入app.vue的话，都可以通过this.app.xxx的形式来访问app.vue的data，computed，method等内容。

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

//app.vue，部分代码省略：

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

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

//某个页面：

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

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

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

进阶技巧：

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

我先简单介绍一下什么是mixins:

混入(mixin)提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。(个人理解mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改)

比如上面的用户信息，就可以放到混合里：

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

然后在app.vue中混合：

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

要深入了解混入请参照官方文档：https://cn.vuejs.org/v2/guide/mixins.html

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue通过provide inject实现组件通信

热门推荐

随机推荐