Vue通过provide inject实现组件通信


Posted in Javascript onSeptember 03, 2020

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

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

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

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

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

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

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

//祖先级组件(上级组件)
<template>
  <div>
    <Pro></Pro>
  </div>
</template>
<script>
import Pro from '../components/provide.vue';
export default {
  data(){
    return{
    }
  },
   provide:{
    foo:'test'
  },
  components:{
    Pro,
  }
}
</script>
<style scoped>
</style>
//子孙级组件(下级组件)
<template>
  <div>
    <p>{{foo}}</p>
  </div>
</template>
<script>
export default {
  data(){
    return {
    }
  },
  inject:['foo'],
}
</script>
<style scoped>
</style>

我们在上级组件中设置了一个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对外提供。那么,所有的组件都能共享其数据,方法等。

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

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

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

//app.vue,部分代码省略:
<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>

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

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

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

//某个页面:
 
<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>

同样非常简单。只要理解了 `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)
export default {
 data () {
  return {
   userInfo: null
  }
 },
 methods: {
  getUserInfo () {
   // 这里通过 ajax 获取用户信息后,赋值给 this.userInfo,以下为伪代码
   $.ajax('/user/info', (data) => {
    this.userInfo = data;
   });
  }
 },
 mounted () {
  this.getUserInfo();
 }
}

然后在app.vue中混合:

<script>
 import mixins_user from'../mixins/user.js';
 export default {
  mixins: [mixins_user],
  data () {
   return {
   }
  }
 }
</script>

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 #Javascript
Vue父组件监听子组件生命周期
Sep 03 #Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 #Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 #Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 #Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 #Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 #Javascript
You might like
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
如何基于Python实现自动扫雷
2020/01/06 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
家长写给老师的建议书
2014/03/13 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
golang特有程序结构入门教程
2021/06/02 Python
利用Java连接Hadoop进行编程
2022/06/28 Java/Android