耀极客论坛

 找回密码
 立即注册
查看: 522|回复: 0

深入了解Vue组件七种通信方式

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-9 00:16:59 | 显示全部楼层 |阅读模式
  vue组件通信的方式,这是在面试中一个非常高频的问题。其实Vue组件的通信方式除了props和 $emit还有很多,本文将对vue组件通信方式进行一下总结,感兴趣的可以学习一下
  vue组件通信的方式,这是在面试中一个非常高频的问题,我刚开始找实习便经常遇到这个问题,当时只知道回到props和 $emit,后来随着学习的深入,才发现vue组件的通信方式竟然有这么多!
  今天对vue组件通信方式进行一下总结,如写的有疏漏之处还请大家留言。

1. props/$emit






简介
  props和 $emit相信大家十分的熟悉了,这是我们最常用的vue通信方式。
  props:props可以是数组或对象,用于接收来自父组件通过v-bind传递的数据。当props为数组时,直接接收父组件传递的属性;当 props 为对象时,可以通过type、default、required、validator等配置来设置属性的类型、默认值、是否必传和校验规则。
  $emit:在父子组件通信时,我们通常会使用 $emit来触发父组件v-on在子组件上绑定相应事件的监听。






代码实例
  下面通过代码来实现一下props和 $emit的父子组件通信,在这个实例中,我们都实现了以下的通信:
  父向子传值:父组件通过 :messageFromParent="message" 将父组件 message 值传递给子组件,当父组件的 input 标签输入时,子组件p标签中的内容就会相应改变。
  子向父传值:父组件通过 @on-receive="receive" 在子组件上绑定了 receive 事件的监听,子组件 input 标签输入时,会触发 receive 回调函数, 通过 this.$emit('on-receive', this.message) 将子组件 message 的值赋值给父组件 messageFromChild ,改变父组件p标签的内容。
  请看代码:
  1. // 子组件代码
  2. ‹template>
  3.   ‹div class="child">
  4.     ‹h4>this is child component‹/h4>
  5.     ‹input type="text" v-model="message" @keyup="send" />
  6.     ‹p>收到来自父组件的消息:{{ messageFromParent }}‹/p>
  7.   ‹/div>
  8. ‹/template>
  9. ‹script>
  10. export default {
  11.   name: 'Child',
  12.   props: ['messageFromParent'],  // 通过props接收父组件传过来的消息
  13.   data() {
  14.     return {
  15.       message: '',
  16.     }
  17.   },
  18.   methods: {
  19.     send() {
  20.       this.$emit('on-receive', this.message)  // 通过 $emit触发on-receive事件,调用父组件中receive回调,并将this.message作为参数
  21.     },
  22.   },
  23. }
  24. ‹/script>
复制代码
  1. // 父组件代码
  2. ‹template>
  3.   ‹div class="parent">
  4.     ‹h3>this is parent component‹/h3>
  5.     ‹input type="text" v-model="message" />
  6.     ‹p>收到来自子组件的消息:{{ messageFromChild }}‹/p>
  7.     ‹Child :messageFromParent="message" @on-receive="receive" />
  8.   ‹/div>
  9. ‹/template>
  10. ‹script>
  11. import Child from './child'
  12. export default {
  13.   name: 'Parent',
  14.   data() {
  15.     return {
  16.       message: '', // 传递给子组件的消息
  17.       messageFromChild: '',
  18.     }
  19.   },
  20.   components: {
  21.     Child,
  22.   },
  23.   methods: {
  24.     receive(msg) { // 接受子组件的信息,并将其赋值给messageFromChild
  25.       this.messageFromChild = msg
  26.     },
  27.   },
  28. }
  29. ‹/script>
复制代码
  效果预览


2. v-slot
简介
  v-slot是 Vue2.6 版本中新增的用于统一实现插槽和具名插槽的api,用于替代 slot(2.6.0废弃) 、 slot-scope(2.6.0废弃) 、 scope(2.5.0废弃) 等api。
  v-slot在 template 标签中用于提供具名插槽或需要接收 prop 的插槽,如果不指定 v-slot ,则取默认值 default 。
代码实例
  下面请看v-slot的代码实例,在这个实例中我们实现了:
  父向子传值:父组件通过 ‹template v-slot:child>{{ message }}‹/template> 将父组件的message值传递给子组件,子组件通过 ‹slot name="child">‹/slot> 接收到相应内容,实现了父向子传值。
  1. // 子组件代码
  2. ‹template>
  3.   ‹div class="child">
  4.     ‹h4>this is child component‹/h4>
  5.     ‹p>收到来自父组件的消息:
  6.       ‹slot name="child">‹/slot>  ‹!--展示父组件通过插槽传递的{{message}}-->
  7.     ‹/p>
  8.   ‹/div>
  9. ‹/template>
复制代码
  1. ‹template>
  2.   ‹div class="parent">
  3.     ‹h3>this is parent component‹/h3>
  4.     ‹input type="text" v-model="message" />
  5.     ‹Child>
  6.       ‹template v-slot:child>
  7.         {{ message }}  ‹!--插槽要展示的内容-->
  8.       ‹/template>
  9.     ‹/Child>
  10.   ‹/div>
  11. ‹/template>
  12. ‹script>
  13. import Child from './child'
  14. export default {
  15.   name: 'Parent',
  16.   data() {
  17.     return {
  18.       message: '',
  19.     }
  20.   },
  21.   components: {
  22.     Child,
  23.   },
  24. }
  25. ‹/script>
复制代码
  效果预览


3. $refs/  $parent/ $children/$root
简介
  我们也同样可以通过 $refs/$parent/$children/$root 等方式获取 Vue 组件实例,得到实例上绑定的属性及方法等,来实现组件之间的通信。
  $refs:我们通常会将 $refs绑定在DOM元素上,来获取DOM元素的 attributes。在实现组件通信上,我们也可以将 $refs 绑定在子组件上,从而获取子组件实例。
  $parent:我们可以在 Vue 中直接通过 this.$parent 来获取当前组件的父组件实例(如果有的话)。
  $children:同理,我们也可以在 Vue 中直接通过 this.$children 来获取当前组件的子组件实例的数组。但是需要注意的是, this.$children 数组中的元素下标并不一定对用父组件引用的子组件的顺序,例如有异步加载的子组件,可能影响其在 children 数组中的顺序。所以使用时需要根据一定的条件例如子组件的name去找到相应的子组件。
  $root:获取当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。通过 $root ,我们可以实现组件之间的跨级通信。
代码实例
  下面来看一个 $ parent 和 $ children 使用的实例(由于这几个api的使用方式大同小异,所以关于 $ refs 和  $ root 的使用就不在这里展开了,在这个实例中实现了:
  父向子传值:子组件通过 $parent.message 获取到父组件中message的值。
  子向父传值:父组件通过 $children 获取子组件实例的数组,在通过对数组进行遍历,通过实例的 name 获取到对应 Child1 子组件实例将其赋值给 child1,然后通过 child1.message 获取到 Child1 子组件的message。
  代码如下:
  1. // 子组件
  2. ‹template>
  3.   ‹div class="child">
  4.     ‹h4>this is child component‹/h4>
  5.     ‹input type="text" v-model="message" />
  6.     ‹p>收到来自父组件的消息:{{ $parent.message }}‹/p>  ‹!--展示父组件实例的message-->
  7.   ‹/div>
  8. ‹/template>
  9. ‹script>
  10. export default {
  11.   name: 'Child1',
  12.   data() {
  13.     return {
  14.       message: '',   // 父组件通过this.$children可以获取子组件实例的message
  15.     }
  16.   },
  17. }
  18. ‹/script>
复制代码
  1. // 父组件
  2. ‹template>
  3.   ‹div class="parent">
  4.     ‹h3>this is parent component‹/h3>
  5.     ‹input type="text" v-model="message" />
  6.     ‹p>收到来自子组件的消息:{{ child1.message }}‹/p> ‹!--展示子组件实例的message-->
  7.     ‹Child />
  8.   ‹/div>
  9. ‹/template>
  10. ‹script>
  11. import Child from './child'
  12. export default {
  13.   name: 'Parent',
  14.   data() {
  15.     return {
  16.       message: '',
  17.       child1: {},
  18.     }
  19.   },
  20.   components: {
  21.     Child,
  22.   },
  23.   mounted() {
  24.     this.child1 = this.$children.find((child) => {
  25.       return child.$options.name === 'Child1'  // 通过options.name获取对应name的child实例
  26.     })
  27.   },
  28. }
  29. ‹/script>
复制代码
  效果预览


4. $attrs/$listener
简介
  $ attrs和 $ listeners 都是 Vue2.4 中新增加的属性,主要是用来供使用者用来开发高级组件的。
  $attrs:用来接收父作用域中不作为 prop 被识别的 attribute 属性,并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
  试想一下,当你创建了一个组件,你要接收 param1 、param2、param3 …… 等数十个参数,如果通过 props,那你需要通过 props: ['param1', 'param2', 'param3', ……] 等声明一大堆。如果这些 props 还有一些需要往更深层次的子组件传递,那将会更加麻烦。
  而使用 $attrs ,你不需要任何声明,直接通过 $attrs.param1 、 $attrs.param2 ……就可以使用,而且向深层子组件传递上面也给了示例,十分方便。
  $listeners:包含了父作用域中的 v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用,这里在传递时的使用方法和 $attrs 十分类似。
代码实例
  在这个实例中,共有三个组件:A、B、C,其关系为:[ A [ B [C] ] ],A为B的父组件,B为C的父组件。即:1级组件A,2级组件B,3级组件C。我们实现了:
  父向子传值:1级组件A通过 :messageFromA="message" 将 message 属性传递给2级组件B,2级组件B通过 $attrs.messageFromA 获取到1级组件A的 message 。
  1. :messageFromA="message"
  2. v-bind="$attrs"
  3. $attrs.messageFromA
复制代码
  子向父传值:1级组件A通过 @keyup="receive" 在子孙组件上绑定keyup事件的监听,2级组件B在通过 v-on="$listeners" 来将 keyup 事件绑定在其 input 标签上。当2级组件B input 输入框输入时,便会触发1级组件A的receive回调,将2级组件B的 input 输入框中的值赋值给1级组件A的 messageFromComp ,从而实现子向父传值。
  1. @keyup="receive"
  2. ‹CompC v-on="$listeners" />
  3. v-on="$listeners"
复制代码
  代码如下:
  1. // 3级组件C
  2. ‹template>
  3.   ‹div class="compc">
  4.     ‹h5>this is C component‹/h5>
  5.     ‹input name="compC" type="text" v-model="message" v-on="$listeners" /> ‹!--将A组件keyup的监听回调绑在该input上-->
  6.     ‹p>收到来自A组件的消息:{{ $attrs.messageFromA }}‹/p>
  7.   ‹/div>
  8. ‹/template>
  9. ‹script>
  10. export default {
  11.   name: 'Compc',
  12.   data() {
  13.     return {
  14.       message: '',
  15.     }
  16.   },
  17. }
  18. ‹/script>
复制代码
  1. // 2级组件B
  2. ‹template>
  3.   ‹div class="compb">
  4.     ‹h4>this is B component‹/h4>
  5.     ‹input name="compB" type="text" v-model="message" v-on="$listeners" />  ‹!--将A组件keyup的监听回调绑在该input上-->
  6.     ‹p>收到来自A组件的消息:{{ $attrs.messageFromA }}‹/p>
  7.     ‹CompC v-bind="$attrs" v-on="$listeners" /> ‹!--将A组件keyup的监听回调继续传递给C组件,将A组件传递的attrs继续传递给C组件-->
  8.   ‹/div>
  9. ‹/template>
  10. ‹script>
  11. import CompC from './compC'
  12. export default {
  13.   name: 'CompB',
  14.   components: {
  15.     CompC,
  16.   },
  17.   data() {
  18.     return {
  19.       message: '',
  20.     }
  21.   },
  22. }
  23. ‹/script>
复制代码
  1. // A组件
  2. ‹template>
  3.   ‹div class="compa">
  4.     ‹h3>this is A component‹/h3>
  5.     ‹input type="text" v-model="message" />
  6.     ‹p>收到来自{{ comp }}的消息:{{ messageFromComp }}‹/p>
  7.     ‹CompB :messageFromA="message" @keyup="receive" />  ‹!--监听子孙组件的keyup事件,将message传递给子孙组件-->
  8.   ‹/div>
  9. ‹/template>
  10. ‹script>
  11. import CompB from './compB'
  12. export default {
  13.   name: 'CompA',
  14.   data() {
  15.     return {
  16.       message: '',
  17.       messageFromComp: '',
  18.       comp: '',
  19.     }
  20.   },
  21.   components: {
  22.     CompB,
  23.   },
  24.   methods: {
  25.     receive(e) { // 监听子孙组件keyup事件的回调,并将keyup所在input输入框的值赋值给messageFromComp
  26.       this.comp = e.target.name
  27.       this.messageFromComp = e.target.value
  28.     },
  29.   },
  30. }
  31. ‹/script>
复制代码
  效果预览


5. provide/inject
简介
  provide/inject这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。如果你是熟悉React的同学,你一定会立刻想到Context这个api,二者是十分相似的。
  provide:是一个对象,或者是一个返回对象的函数。该对象包含可注入其子孙的 property ,即要传递给子孙的属性和属性值。
  injcet:一个字符串数组,或者是一个对象。当其为字符串数组时,使用方式和props十分相似,只不过接收的属性由data变成了provide中的属性。当其为对象时,也和props类似,可以通过配置default和from等属性来设置默认值,在子组件中使用新的命名属性等。
代码实例
  这个实例中有三个组件,1级组件A,2级组件B,3级组件C:[ A [ B [C] ] ],A是B的父组件,B是C的父组件。实例中实现了:
  父向子传值:1级组件A通过provide将message注入给子孙组件,2级组件B通过 inject: ['messageFromA'] 来接收1级组件A中的message,并通过 messageFromA.content 获取1级组件A中message的content属性值。
  跨级向下传值:1级组件A通过provide将message注入给子孙组件,3级组件C通过 inject: ['messageFromA'] 来接收1级组件A中的message,并通过 messageFromA.content 获取1级组件A中message的content属性值,实现跨级向下传值。
  代码如下:
  1. // 1级组件A
  2. ‹template>
  3.   ‹div class="compa">
  4.     ‹h3>this is A component‹/h3>
  5.     ‹input type="text" v-model="message.content" />
  6.     ‹CompB />
  7.   ‹/div>
  8. ‹/template>
  9. ‹script>
  10. import CompB from './compB'
  11. export default {
  12.   name: 'CompA',
  13.   provide() {
  14.     return {
  15.       messageFromA: this.message,  // 将message通过provide传递给子孙组件
  16.     }
  17.   },
  18.   data() {
  19.     return {
  20.       message: {
  21.         content: '',
  22.       },
  23.     }
  24.   },
  25.   components: {
  26.     CompB,
  27.   },
  28. }
  29. ‹/script>
复制代码
  1. // 2级组件B
  2. ‹template>
  3.   ‹div class="compb">
  4.     ‹h4>this is B component‹/h4>
  5.     ‹p>收到来自A组件的消息:{{ messageFromA && messageFromA.content }}‹/p>
  6.     ‹CompC />
  7.   ‹/div>
  8. ‹/template>
  9. ‹script>
  10. import CompC from './compC'
  11. export default {
  12.   name: 'CompB',
  13.   inject: ['messageFromA'], // 通过inject接受A中provide传递过来的message
  14.   components: {
  15.     CompC,
  16.   },
  17. }
  18. ‹/script>
复制代码
  1. // 3级组件C
  2. ‹template>
  3.   ‹div class="compc">
  4.     ‹h5>this is C component‹/h5>
  5.     ‹p>收到来自A组件的消息:{{ messageFromA && messageFromA.content }}‹/p>
  6.   ‹/div>
  7. ‹/template>
  8. ‹script>
  9. export default {
  10.   name: 'Compc',
  11.   inject: ['messageFromA'], // 通过inject接受A中provide传递过来的message
  12. }
  13. ‹/script>
复制代码
  注意点:
  可能有同学想问我上面1级组件A中的message为什么要用object类型而不是string类型,因为在vue provide 和 inject 绑定并不是可响应的。如果message是string类型,在1级组件A中通过input输入框改变message值后无法再赋值给messageFromA,如果是object类型,当对象属性值改变后,messageFromA里面的属性值还是可以随之改变的,子孙组件inject接收到的对象属性值也可以相应变化。
  子孙provide和祖先同样的属性,会在后代中覆盖祖先的provide值。例如2级组件B中也通过provide向3级组件C中注入一个messageFromA的值,则3级组件C中的messageFromA会优先接收2级组件B注入的值而不是1级组件A。
  效果预览


6. eventBus
简介
  eventBus又称事件总线,通过注册一个新的Vue实例,通过调用这个实例的 $ emit 和 $ on等来监听和触发这个实例的事件,通过传入参数从而实现组件的全局通信。它是一个不具备 DOM 的组件,有的仅仅只是它实例方法而已,因此非常的轻便。
  我们可以通过在全局Vue实例上注册:
  1. // main.js
  2. Vue.prototype.$Bus = new Vue()
复制代码
  但是当项目过大时,我们最好将事件总线抽象为单个文件,将其导入到需要使用的每个组件文件中。这样,它不会污染全局命名空间:
  1. // bus.js,使用时通过import引入
  2. import Vue from 'vue'
  3. export const Bus = new Vue()
复制代码
原理分析
  eventBus的原理其实比较简单,就是使用订阅-发布模式,实现 $ emit 和 $ on两个方法即可:
  1. // eventBus原理
  2. export default class Bus {
  3.   constructor() {
  4.     this.callbacks = {}
  5.   }
  6.   $on(event, fn) {
  7.     this.callbacks[event] = this.callbacks[event] || []
  8.     this.callbacks[event].push(fn)
  9.   }
  10.   $emit(event, args) {
  11.     this.callbacks[event].forEach((fn) => {
  12.       fn(args)
  13.     })
  14.   }
  15. }
  16. // 在main.js中引入以下
  17. // Vue.prototype.$bus = new Bus()
复制代码
代码实例
  在这个实例中,共包含了4个组件:[ A [ B [ C、D ] ] ],1级组件A,2级组件B,3级组件C和3级组件D。我们通过使用eventBus实现了:
  全局通信:即包括了父子组件相互通信、兄弟组件相互通信、跨级组件相互通信。4个组件的操作逻辑相同,都是在input输入框时,通过 this.$bus.$emit('sendMessage', obj) 触发sendMessage事件回调,将sender和message封装成对象作为参数传入;同时通过 this.$bus.$on('sendMessage', obj) 监听其他组件的sendMessage事件,实例当前组件示例sender和message的值。这样任一组件input输入框值改变时,其他组件都能接收到相应的信息,实现全局通信。
  代码如下:
  1. // main.js
  2. Vue.prototype.$bus = new Vue()
复制代码
  1. // 1级组件A
  2. ‹template>  
  3.   ‹div class="containerA">   
  4.     ‹h2>this is CompA‹/h2>  
  5.     ‹input type="text" v-model="message" @keyup="sendMessage" />   
  6.     ‹p v-show="messageFromBus && sender !== $options.name">      
  7.       收到{{ sender }}的消息:{{ messageFromBus }}   
  8.     ‹/p>   
  9.     ‹CompB />
  10.   ‹/div>
  11. ‹/template>
  12. ‹script>
  13. import CompB from './compB'
  14. export default {  
  15.   name: 'CompA',
  16.   components: {   
  17.     CompB,  
  18.   },  
  19.   data() {  
  20.     return {   
  21.       message: '',   
  22.       messageFromBus: '',      
  23.       sender: '',   
  24.     }
  25.   },  
  26.   mounted() {   
  27.     this.$bus.$on('sendMessage', (obj) => {  // 通过eventBus监听sendMessage事件     
  28.       const { sender, message } = obj   
  29.       this.sender = sender     
  30.       this.messageFromBus = message  
  31.     })
  32.   },
  33.   methods: {  
  34.     sendMessage() {     
  35.       this.$bus.$emit('sendMessage', { // 通过eventBus触发sendMessage事件     
  36.         sender: this.$options.name,     
  37.         message: this.message,   
  38.       })   
  39.     },
  40.   },
  41. }
  42. ‹/script>
复制代码
  1. // 2级组件B
  2. ‹template>
  3.   ‹div class="containerB">   
  4.     ‹h3>this is CompB‹/h3>  
  5.     ‹input type="text" v-model="message" @keyup="sendMessage" />  
  6.     ‹p v-show="messageFromBus && sender !== $options.name">     
  7.       收到{{ sender }}的消息:{{ messageFromBus }}  
  8.     ‹/p>  
  9.     ‹CompC />  
  10.     ‹CompD />
  11.   ‹/div>
  12. ‹/template>
  13. ‹script>
  14. import CompC from './compC'
  15. import CompD from './compD'
  16. export default {
  17.   name: 'CompB',
  18.   components: {  
  19.     CompC,  
  20.     CompD,  
  21.   },
  22.   data() {  
  23.     return {   
  24.       message: '',   
  25.       messageFromBus: '',   
  26.       sender: '',   
  27.     }
  28.   },
  29.   mounted() {   
  30.     this.$bus.$on('sendMessage', (obj) => { // 通过eventBus监听sendMessage事件     
  31.       const { sender, message } = obj     
  32.       this.sender = sender     
  33.       this.messageFromBus = message  
  34.     })
  35.   },
  36.   methods: {  
  37.     sendMessage() {   
  38.       this.$bus.$emit('sendMessage', { // 通过eventBus触发sendMessage事件      
  39.         sender: this.$options.name,   
  40.         message: this.message,   
  41.      })   
  42.    },  
  43. },
  44. }
  45. ‹/script>
复制代码
  1. // 3级组件C
  2. ‹template>
  3.   ‹div class="containerC">  
  4.     ‹p>this is CompC‹/p>   
  5.     ‹input type="text" v-model="message" @keyup="sendMessage" />   
  6.     ‹p v-show="messageFromBus && sender !== $options.name">      
  7.       收到{{ sender }}的消息:{{ messageFromBus }}  
  8.     ‹/p>
  9.   ‹/div>
  10. ‹/template>
  11. ‹script>
  12. export default {  
  13.   name: 'CompC',
  14.   data() {   
  15.     return {   
  16.       message: '',   
  17.       messageFromBus: '',   
  18.       sender: '',   
  19.     }
  20.   },
  21.   mounted() {  
  22.     this.$bus.$on('sendMessage', (obj) => { // 通过eventBus监听sendMessage事件   
  23.       const { sender, message } = obj   
  24.       this.sender = sender   
  25.       this.messageFromBus = message   
  26.     })  
  27.   },
  28.   methods: {   
  29.     sendMessage() {   
  30.       this.$bus.$emit('sendMessage', { // 通过eventBus触发sendMessage事件      
  31.         sender: this.$options.name,     
  32.         message: this.message,     
  33.       })   
  34.     },
  35.   },
  36. }
  37. ‹/script>
复制代码
  1. // 3级组件D
  2. ‹template>
  3.   ‹div class="containerD">   
  4.     ‹p>this is CompD‹/p>   
  5.     ‹input type="text" v-model="message" @keyup="sendMessage" />   
  6.     ‹p v-show="messageFromBus && sender !== $options.name">     
  7.       收到{{ sender }}的消息:{{ messageFromBus }}
  8.     ‹/p>
  9.   ‹/div>
  10. ‹/template>
  11. ‹script>
  12. export default {
  13.   name: 'CompD',
  14.   data() {  
  15.     return {   
  16.       message: '',   
  17.       messageFromBus: '',   
  18.       sender: '',   
  19.     }
  20.   },
  21.   mounted() {   
  22.     this.$bus.$on('sendMessage', (obj) => { // 通过eventBus监听sendMessage事件     
  23.       const { sender, message } = obj   
  24.       this.sender = sender   
  25.       this.messageFromBus = message   
  26.     })
  27.   },
  28.   methods: {  
  29.     sendMessage() {   
  30.       this.$bus.$emit('sendMessage', { // 通过eventBus触发sendMessage事件      
  31.         sender: this.$options.name,     
  32.         message: this.message,   
  33.       })  
  34.     },
  35.   },
  36. }
  37. ‹/script>
复制代码
  效果预览

  图片过大,截图处理

7. Vuex
  当项目庞大以后,在多人维护同一个项目时,如果使用事件总线进行全局通信,容易让全局的变量的变化难以预测。于是有了Vuex的诞生。
  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
  有关Vuex的内容,可以参考 Vuex官方文档 [1] ,我就不在这里班门弄斧了,直接看代码。
代码实例
  Vuex的实例和事件总线leisi,同样是包含了4个组件:[ A [ B [ C、D ] ] ],1级组件A,2级组件B,3级组件C和3级组件D。我们在这个实例中实现了:
  全局通信:代码的内容和eventBus也类似,不过要比eventBus使用方便很多。每个组件通过watch监听input输入框的变化,把input的值通过vuex的commit触发mutations,从而改变stroe的值。然后每个组件都通过computed动态获取store中的数据,从而实现全局通信。
  1. // store.js
  2. import Vue from 'vue'
  3. import Vuex from 'vuex'
  4. Vue.use(Vuex)
  5. export default new Vuex.Store({
  6.   state: {
  7.     message: {
  8.       sender: '',
  9.       content: '',
  10.     },
  11.   },
  12.   mutations: {
  13.     sendMessage(state, obj) {
  14.       state.message = {
  15.         sender: obj.sender,
  16.         content: obj.content,
  17.       }
  18.     },
  19.   },
  20. })
复制代码
  1. // 组件A
  2. ‹template>
  3.   ‹div class="containerA">
  4.     ‹h2>this is CompA‹/h2>
  5.     ‹input type="text" v-model="message" />
  6.     ‹p v-show="messageFromStore && sender !== $options.name">
  7.       收到{{ sender }}的消息:{{ messageFromStore }}
  8.     ‹/p>
  9.     ‹CompB />
  10.   ‹/div>
  11. ‹/template>
  12. ‹script>
  13. import CompB from './compB'
  14. export default {
  15.   name: 'CompA',
  16.   components: {
  17.     CompB,
  18.   },
  19.   data() {
  20.     return {
  21.       message: '',
  22.     }
  23.   },
  24.   computed: {
  25.     messageFromStore() {
  26.       return this.$store.state.message.content
  27.     },
  28.     sender() {
  29.       return this.$store.state.message.sender
  30.     },
  31.   },
  32.   watch: {
  33.     message(newValue) {
  34.       this.$store.commit('sendMessage', {
  35.         sender: this.$options.name,
  36.         content: newValue,
  37.       })
  38.     },
  39.   },
  40. }
  41. ‹/script>
复制代码
  同样和eventBus中一样,B,C,D组件中的代码除了引入子组件的不同,script部分都是一样的,就不再往上写了。
  效果预览


总结
  上面总共提到了7中Vue的组件通信方式,他们能够进行的通信种类如下图所示:

       
  • props/$emit:可以实现父子组件的双向通信,在日常的父子组件通信中一般会作为我们的最常用选择。   
  • v-slot:可以实现父子组件单向通信(父向子传值),在实现可复用组件,向组件中传入DOM节点、html等内容以及某些组件库的表格值二次处理等情况时,可以优先考虑v-slot。   
  • $ refs/$ parent/ $ children/ $ r oot: 可 以实现父子组件双向通信,其中 $root可以实现根组件实例向子孙组件跨级单向传值。 在父组件没有传递值或通过v-on绑定监听时,父子间想要获取彼此的属性或方法可以考虑使用这些api。   
  • $ attrs/ $ listeners: 能够实现跨级双向通信,能够让你简单的获取传入的属性和绑定的监听,并且方便地向下级子组件传递,在构建高级组件时十分好用。   
  • provide/inject:可以实现跨级单向通信,轻量地向子孙组件注入依赖,这是你在实现高级组件、创建组件库时的不二之选。   
  • eventBus:可以实现全局通信,在项目规模不大的情况下,可以利用eventBus实现全局的事件监听。但是eventBus要慎用,避免全局污染和内存泄漏等情况。   
  • Vuex:可以实现全局通信,是vue项目全局状态管理的最佳实践。在项目比较庞大,想要集中式管理全局组件状态时,那么安装Vuex准没错!
  以上就是深入了解Vue组件七种通信方式的详细内容,更多关于Vue组件通信方式的资料请关注脚本之家其它相关文章!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:27 , Processed in 0.069815 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表