• 售前

  • 售后

热门帖子
入门百科

超详细的vue组件间通讯总结

[复制链接]
飘渺九月 显示全部楼层 发表于 2021-8-14 14:14:31 |阅读模式 打印 上一主题 下一主题
目次


  • 前言
  • 一、props、$emit单向数据流
  • 二、$parent、$children
  • 三、$attrs、$listeners
  • 四、provide、inject
  • 五、eventBus(变乱总线)
  • 六、vuex
  • 七、localstorage
  • 总结

前言

组件通讯在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的职位。本篇将总结在vue中,组件之间通讯的几种方式:
       
  • props、$emit   
  • $parent、$children   
  • $attrs、$listeners   
  • provide、inject   
  • eventBus   
  • vuex   
  • 本地存储

一、props、$emit单向数据流


father.vue:
  1. <template>
  2.   <div>
  3.     <div>我是父亲:<input type="button" value="父亲" /> 数字为: {{num}}</div>
  4.     <son :num="num" @change="change"></son>
  5.   </div>
  6. </template>
  7. <script>
  8. import son from "./son.vue";
  9. export default {
  10.   name: "Father",
  11.   components: {
  12.     son,
  13.   },
  14.   data() {
  15.     return {
  16.       num: 1,
  17.     };
  18.   },
  19.   methods:{
  20.     change(val){
  21.       this.num = val
  22.     }
  23.   }
  24. };
  25. </script>
复制代码
son.vue:
  1. <template>
  2.   <div>我是儿子:<input type="button" value="儿子" @click="change"/>数字为:{{num}}</div>
  3. </template>
  4. <script>
  5. export default {
  6.   name: "App",
  7.   components: {},
  8.   props: {
  9.     num: {
  10.       default: 0,
  11.     },
  12.   },
  13.   created() {},
  14.   methods: {
  15.     change(){
  16.       // this.num = 2  props通信是单向数据流,在这直接修改父组件传过来的num将会报错    // 可以用$emit触发change事件,father组件绑定change事件    this.$emit('change', 2)
  17.     }
  18.   },
  19. };
  20. </script>
复制代码

对于上面的场景:子组件的change变乱只是为了修改父组件中某一个值,还可以有以下几种写法:
1.父组件绑定给子组件的变乱利用箭头函数
  1. father:
  2. <son :num="num" @change="val => num = val"></son>
  3. son:
  4. this.$emit('change', 2)
复制代码
2.update:num和.sync
  1. father:
  2. <son :num.sync="num"></son>
  3. son:
  4. this.$emit('update:num', 2)//update是规定的写法,不可更换
复制代码
3.v-model
先修改props和绑定的变乱:
  1. father:<son :value="num" @input="val => num = val"></son>son:this.$emit('input', 2)
  2. 可用v-model简写:<son v-model="num"></son>
复制代码
二、$parent、$children

$parent、$children可直接在父子组件中调用各自的方法以及修改数据
子组件中直接:this.$parent.num = 2
父组件中$children是个数组,因此详细是哪个子组件不太直观,可以用$refs来操作子组件
vue官方并不保举利用这种通讯方式:控制地利用
  1. $parent
复制代码
  1. $children
复制代码
- 它们的主要目的是作为访问组件的应急方法,更保举用 props 和 events 实现父子组件通讯。

三、$attrs、$listeners

$attrs可以拿到父组件传过来的属性:
  1. <div>我是儿子:<input type="button" value="儿子" @click="change"/>数字为:{{$attrs}}</div>
复制代码

dom节点:

$attrs会直接将传过来的属性放到对应的标签上,反观props就不会。假如想去掉标签中的这些属性,可以用inheritAttrs:

值得注意的是:props的优先级大于$attrs,即当props存在的时间,$attrs为空对象:

$attrs常用于跨多级组件传递属性,好比祖孙组件,用父组件做中转:
father:
  1. <son v-bind="$attrs"></son>
复制代码
$attrs用于属性跨级传递,方法跨级传递则用$listeners。
grandFather.vue:
  1. <template>
  2.   <div>
  3.     <div>我是祖父: 数字为:{{nums}}</div>
  4.     <father :nums="nums" @up="up" @down="down"></father>
  5.   </div>
  6. </template>
  7. <script>
  8. import father from "./father.vue";
  9. export default {
  10.   name: "App",
  11.   components: {
  12.     father,
  13.   },
  14.   data(){
  15.     return {
  16.       nums:0
  17.     }
  18.   },
  19.   methods: {
  20.     up() {
  21.       alert('up')
  22.     },  down() {   alert('down')  },
  23.   },
  24. };
  25. </script>
复制代码
father.vue:
  1. <son v-bind="$attrs" v-on="$listeners"></son>
复制代码
son.vue:
  1. <div>我是儿子:<input type="button" value="儿子" @click="$listeners.up"/></div>
复制代码


四、provide、inject

这对选项必要一起利用,以允许一个祖先组件向其全部子孙后代注入一个依赖,岂论组件条理有多深,并在其上下游关系建立的时间里始终收效
provide选项应该是一个对象或返回一个对象的函数。
inject选项应该是一个字符串数组或一个对象。
App:
  1. ...
  2. export default {
  3.   provide(){
  4.     return {vm: this}
  5.   },
  6. ...
复制代码
son:
  1. ...
  2. export default {
  3.   inject: ['vm'], data(){}, mounted(){  console.log(this.vm) }
  4. ...
复制代码

注意:provide 和 inject 绑定并不是可相应的。这是刻意为之的。然而,假如你传入了一个可监听的对象,那么其对象的 property 还是可相应的。
   inject注入中的值会沿着组件向上查找,服从"就近原则"。
   provide 和 inject中的数据流是双向的。

五、eventBus(变乱总线)

eventBus通过发布订阅全局变乱,供其他组件利用。
在main.js中:
  1. Vue.prototype.$bus = new Vue();
复制代码
parent.vue:
  1. <template>
  2.   <div>
  3.     <son1></son1>
  4.     <son2></son2>
  5.   </div>
  6. </template>
  7. <script>
  8. import son1 from './son1.vue'
  9. import son2 from './son2.vue'
  10. export default {
  11.   name: 'parent',
  12.   components: {
  13.     son1,
  14.     son2
  15.   },
  16.   created(){
  17.      this.$bus.$on('busEvent',(v)=>{
  18.       console.log(v);
  19.     })
  20.   },
  21.   beforeDestroy(){
  22.     this.$bus.off('busEvent')
  23.   }
  24. }
  25. </script>
复制代码
son1和son2中的mounted:
  1. son1:mounted(){
  2.   this.$bus.$emit('busEvent','son1哈哈')
  3. }son2:mounted(){  this.$bus.$emit('busEvent', 'son2嘻嘻')}
复制代码
打印结果:

利用eventBus有三点必要注意,1.$bus.on应该在created钩子内利用,假如在mounted利用,它可能吸收不到其他组件来自created钩子内发出的变乱;
               2.$bus.emit应该在mounted中利用,等候created中的$bus.on变乱绑定完成;
               3.发布订阅的变乱在beforeDestory钩子里必要利用$bus.off排除,组件烧毁后没须要一直监听。

六、vuex

借助vuex的状态管理来实现组件通讯,vuex实用于较为复杂的项目,频繁的数据共享且数据量比力大。
store/index.js:
  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. Vue.use(Vuex)
  4. const store = new Vuex.Store({
  5.   state: {
  6.     isLogin: false
  7.   },
  8.   mutations: {
  9.     loginState (state, isLogin) {
  10.       state.isLogin = isLogin
  11.     }
  12.   }
  13. })
  14. export default store
复制代码
App.vue:
  1. created(){
  2.   this.$store.commit('loginState',true)// 设置登录状态为true
  3. },
复制代码
son.vue:
  1. <template>
  2.   <div>我是儿子:<input type="button" value="儿子" />登录状态:{{isLogin}}</div>
  3. </template>
  4. <script>
  5. import {mapState} from 'vuex';
  6. export default {
  7.   name: "son",
  8.   computed:{
  9.     ...mapState(['isLogin'])
  10.   }
  11. };
  12. </script>
复制代码

七、localstorage

localstorage是欣赏器的本地存储,将会长期存储在欣赏器中,非常庞大的数据不建议用此方式。
App.vue
  1. created(){
  2.   localStorage.setItem('isLogin', true)
  3. },
复制代码
son.vue:
  1. computed:{
  2.   isLogin(){
  3.     return localStorage.getItem('isLogin')
  4.   }
  5. }
复制代码
常见的组件通讯方式根本就是这些啦,有什么遗漏或不足的,接待评论区留言!

总结

到此这篇关于vue组件间通讯的文章就先容到这了,更多相干vue组件间通讯内容请搜索草根技术分享从前的文章或继承欣赏下面的相干文章渴望大家以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作