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 相关文章推荐
在JavaScript中监听IME键盘输入事件
May 29 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
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 字符串分割和比较
2009/10/06 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
深入理解Javascript中的this关键字
2015/03/27 Python
Python语言实现获取主机名根据端口杀死进程
2016/03/31 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
简单了解python协程的相关知识
2019/08/31 Python
python生成器用法实例详解
2019/11/22 Python
Python类继承和多态原理解析
2020/02/05 Python
python实现发送邮件
2021/03/02 Python
行政管理专业推荐信
2013/11/02 职场文书
喝酒检查书范文
2014/02/23 职场文书
合作投资意向书
2014/04/01 职场文书
欢迎领导标语
2014/06/27 职场文书
国庆节活动总结
2014/08/26 职场文书
营销计划书
2015/01/17 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python