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 相关文章推荐
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
Jquery 扩展方法
May 06 Javascript
了解一点js的Eval函数
Jul 26 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
拼音码表的生成
2006/10/09 PHP
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
python 正则式使用心得
2009/05/07 Python
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
PyTorch CNN实战之MNIST手写数字识别示例
2018/05/29 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Python csv文件记录流程代码解析
2020/07/16 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
课外小组活动总结
2014/08/27 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript