整顿4种Vue组件通讯体式格局

2024年3月2日 182次阅读 来源: Ziwei

整顿4种Vue组件通讯体式格局

重点是梳理了前两个,父子组件通讯和eventBus通讯,我以为Vue文档里的申明照样有一些浅易,我本身第一遍是没看邃晓。

  • 父子组件的通讯
  • 非父子组件的eventBus通讯
  • 运用当地缓存完成组件通讯
  • Vuex通讯

第一种通讯体式格局:父子组件通讯

父组件向子组件通报数据

  • 父组件一共须要做4件事

    • 1.import son from ‘./son.js’ 引入子组件 son
    • 2.在components : {“son”} 里注册一切子组件称号
    • 3.在父组件的template运用子组件, <son></son>
    • 4.假如须要通报数据给子组件,就在template模板里写 <son :num=”number”></son>
 // 1.引入子组件
 
     import counter from './counter'
     import son from './son'
// 2.在ccmponents里注册子组件

    components : {
        counter,
        son
    },
// 3.在template里运用子组件

   <son></son>
 // 4.假如须要通报数据,也是在templete里写
 
   <counter :num="number"></counter>

  • 子组件只须要做1件事

    • 1.用props接收数据,就能够直接运用数据
    • 2.子组件接收到的数据,不能去修正。假如你确实须要修正,能够用盘算属性,或许把数据赋值给子组件data里的一个变量
   // 1.用Props接收数据
      props: [
               'num'
           ],
   
// 2.假如须要修正获得的数据,能够如许写
   props: [
            'num'
        ],
  data () {
        return {
            number : this.num
        }
    },

子组件向父组件通报数据

  • 父组件一共须要做2件事变

    • 在template里定义事宜
    • 在methods里写函数,监听子组件的事宜触发
// 1. 在templete里运用子组件时,定义事宜changeNumber
      <counter :num="number"
                 @changeNumber="changeNumber"
      >
      </counter>
// 2. 用changeNumber监听事宜是不是触发
        methods: {
            changeNumber(e){
                console.log('子组件emit了',e);
                this.number = e
            },
        }

  • 子组件一共须要1件事变

    • 在数据变化后,用$emit触发即可
// 1. 子组件在数据变化后,用$emit触发即可,第二个参数能够通报参数
        methods: {
            increment(){
                    this.number++
                    this.$emit('changeNumber', this.number)
                },
        }

第二种通讯体式格局: eventBus

eventBus这类通讯体式格局,针对的黑白父子组件之间的通讯,它的道理照样经由过程事宜的触发和监听。

然则由于黑白父子组件的关联,他们须要有一个中心组件来衔接。

我是运用的经由过程在根组件,也就是#app组件上定义了一个一切组件都能够访问到的组件,详细运用体式格局以下

运用eventBus通报数据,我们一共须要做3件事变

  • 1.给app组件增加Bus属性 (如许一切组件都能够经由过程this.$root.Bus访问到它,而且不须要引入任何文件)
  • 2.在组件1里,this.$root.Bus.$emit触发事宜
  • 3.在组件2里,this.$root.Bus.$on监听事宜
// 1.在main.js里给app组件,增加bus属性
import Vue from 'vue'

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  data(){
    return {
      Bus : new Vue()
    }
  }
})

// 2.在组件1里,触发emit

increment(){
        this.number++
        this.$root.Bus.$emit('eventName', this.number)
    },

// 3.在组件2里,监听事宜,接收数据

mounted(){
    this.$root.Bus.$on('eventName', value => {
        this.number = value
        console.log('busEvent');
    })
},

第三种通讯体式格局: 运用localStorage或许sessionStorage

这类通讯比较简单,瑕玷是数据和状况比较杂沓,不太轻易保护。

经由过程window.localStorage.getItem(key) 猎取数据
经由过程window.localStorage.setItem(key,value) 存储数据

注重用JSON.parse() / JSON.stringify() 做数据格式转换。

第四种通讯体式格局: 运用Vuex

Vuex比较复杂,能够零丁写一篇

    原文作者：Ziwei
    原文地址: https://segmentfault.com/a/1190000013168979
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞