前言

vue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 我們平時(shí)開發(fā)，都會(huì)把頁(yè)面不同模塊拆分成一個(gè)一個(gè)vue組件， 所以對(duì)于vue來說組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進(jìn)行數(shù)據(jù)通信的呢？

首先我們需要知道在vue中組件之間存在什么樣的關(guān)系, 才更容易理解他們的通信方式。

一般我們分為如下關(guān)系：

父子組件之間通信
非父子組件之間通信(兄弟組件、隔代關(guān)系組件、跨層級(jí)組件等)

Vue2.x 組件通信共有12種

1. props
2. $emit / v-on
3. .sync
4. v-model
5. ref
6. $children / $parent
7. $attrs / $listeners
8. provide / inject
9. EventBus
10. Vuex
11. $root
12. slot
13. 路由傳參
14. observable

父子組件通信可以用：

• props
• $emit / v-on
• $attrs / $listeners
• ref
• .sync
• v-model
• $children / $parent

兄弟組件通信可以用：

• EventBus
• Vuex
• $parent

跨層級(jí)組件通信可以用：

• provide/inject
• EventBus
• Vuex
• $attrs / $listeners
• $root

Vue2.x 組件通信使用寫法

下面把每一種組件通信方式的寫法一一列出

1. props

父組件向子組件傳送數(shù)據(jù)，這應(yīng)該是最常用的方式了

子組件接收到數(shù)據(jù)之后，不能直接修改父組件的數(shù)據(jù)。會(huì)報(bào)錯(cuò)，所以當(dāng)父組件重新渲染時(shí)，數(shù)據(jù)會(huì)被覆蓋。如果子組件內(nèi)要修改的話推薦使用 computed

格式：

// 數(shù)組:不建議使用
props:[]

// 對(duì)象
props:{
 inpVal:{
  type:Number, //傳入值限定類型
  // type 值可為String,Number,Boolean,Array,Object,Date,Function,Symbol
  // type 還可以是一個(gè)自定義的構(gòu)造函數(shù)，并且通過 instanceof 來進(jìn)行檢查確認(rèn)
  required: true, //是否必傳
  default:200,  //默認(rèn)值,對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取如 default:()=>[]
  validator:(value) {
    // 這個(gè)值必須匹配下列字符串中的一個(gè)
    return ['success', 'warning', 'danger'].indexOf(value) !== -1
  }
 }
}

事例：

// Parent.vue 傳送
<template>
    <child :msg="msg"></child>
</template>

// Child.vue 接收
export default {
  // 寫法一 用數(shù)組接收
  props:['msg'],
  // 寫法二 用對(duì)象接收，可以限定接收的數(shù)據(jù)類型、設(shè)置默認(rèn)值、驗(yàn)證等
  props:{
      msg:{
          type:String,
          default:'這是默認(rèn)數(shù)據(jù)'
      }
  },
  mounted(){
      console.log(this.msg)
  },
}

注意：

prop 只可以從上一級(jí)組件傳遞到下一級(jí)組件（父子組件），即所謂的單向數(shù)據(jù)流。而且 prop 只讀，不可被修改，所有修改都會(huì)失效并警告。

• 第一，不應(yīng)該在一個(gè)子組件內(nèi)部改變 prop，這樣會(huì)破壞單向的數(shù)據(jù)綁定，導(dǎo)致數(shù)據(jù)流難以理解。如果有這樣的需要，可以通過 data 屬性接收或使用 computed 屬性進(jìn)行轉(zhuǎn)換。
• 第二，如果 props 傳遞的是引用類型(對(duì)象或者數(shù)組)，在子組件中改變這個(gè)對(duì)象或數(shù)組，父組件的狀態(tài)會(huì)也會(huì)做相應(yīng)的更新，利用這一點(diǎn)就能夠?qū)崿F(xiàn)父子組件數(shù)據(jù)的“雙向綁定”，雖然這樣實(shí)現(xiàn)能夠節(jié)省代碼，但會(huì)犧牲數(shù)據(jù)流向的簡(jiǎn)潔性，令人難以理解，最好不要這樣去做。
• 想要實(shí)現(xiàn)父子組件的數(shù)據(jù)“雙向綁定”，可以使用 v-model 或 .sync。

2. $emit / v-on

子傳父的方法，子組件通過派發(fā)事件的方式給父組件數(shù)據(jù)，或者觸發(fā)父組件更新等操作

// Child.vue 派發(fā)
export default {
  data(){
      return { msg: "這是發(fā)給父組件的信息" }
  },
  methods: {
      handleClick(){
          this.$emit("sendMsg",this.msg)
      }
  },
}
// Parent.vue 響應(yīng)
<template>
    <child v-on:sendMsg="getChildMsg"></child>
    // 或 簡(jiǎn)寫
    <child @sendMsg="getChildMsg"></child>
</template>

export default {
    methods:{
        getChildMsg(msg){
            console.log(msg) // 這是父組件接收到的消息
        }
    }
}

3. v-model

和 .sync 類似，可以實(shí)現(xiàn)將父組件傳給子組件的數(shù)據(jù)為雙向綁定，子組件通過 $emit 修改父組件的數(shù)據(jù)

// Parent.vue
<template>
    <child v-model="value"></child>
</template>
<script>
export default {
    data(){
        return {
            value:1
        }
    }
}

// Child.vue
<template>
    <input :value="value" @input="handlerChange">
</template>
export default {
    props:["value"],
    // 可以修改事件名，默認(rèn)為 input
    model:{
        // prop:'value', // 上面?zhèn)鞯氖莢alue這里可以不寫，如果屬性名不是value就要寫
        event:"updateValue"
    },
    methods:{
        handlerChange(e){
            this.$emit("input", e.target.value)
            // 如果有上面的重命名就是這樣
            this.$emit("updateValue", e.target.value)
        }
    }
}
</script>

4. ref

ref 如果在普通的DOM元素上，引用指向的就是該DOM元素;

如果在子組件上，引用的指向就是子組件實(shí)例，然后父組件就可以通過 ref 主動(dòng)獲取子組件的屬性或者調(diào)用子組件的方法

// Child.vue
export default {
    data(){
        return {
            name:"RDIF"
        }
    },
    methods:{
        someMethod(msg){
            console.log(msg)
        }
    }
}

// Parent.vue
<template>
    <child ref="child"></child>
</template>
<script>
export default {
    mounted(){
        const child = this.$refs.child
        console.log(child.name) // RDIF
        child.someMethod("調(diào)用了子組件的方法")
    }
}
</script>

5. .sync

可以幫我們實(shí)現(xiàn)父組件向子組件傳遞的數(shù)據(jù) 的雙向綁定，所以子組件接收到數(shù)據(jù)后可以直接修改，并且會(huì)同時(shí)修改父組件的數(shù)據(jù)

// Parent.vue
<template>
    <child :page.sync="page"></child>
</template>
<script>
export default {
    data(){
        return {
            page:1
        }
    }
}

// Child.vue
export default {
    props:["page"],
    computed(){
        // 當(dāng)我們?cè)谧咏M件里修改 currentPage 時(shí)，父組件的 page 也會(huì)隨之改變
        currentPage {
            get(){
                return this.page
            },
            set(newVal){
                this.$emit("update:page", newVal)
            }
        }
    }
}
</script>

6. $attrs / $listeners

多層嵌套組件傳遞數(shù)據(jù)時(shí)，如果只是傳遞數(shù)據(jù)，而不做中間處理的話就可以用這個(gè)，比如父組件向?qū)O子組件傳遞數(shù)據(jù)時(shí)。

$attrs：包含父作用域里除 class 和 style 除外的非 props 屬性集合。通過 this.$attrs 獲取父作用域中所有符合條件的屬性集合，然后還要繼續(xù)傳給子組件內(nèi)部的其他組件，就可以通過 v-bind="$attrs"。

場(chǎng)景：如果父?jìng)髯佑泻芏嘀?那么在子組件需要定義多個(gè) props

解決：$attrs獲取子傳父中未在 props 定義的值

// 父組件
<home title="這是標(biāo)題" width="80" height="80" imgUrl="imgUrl"/>

// 子組件
mounted() {
  console.log(this.$attrs) //{title: "這是標(biāo)題", width: "80", height: "80", imgUrl: "imgUrl"}
},

相對(duì)應(yīng)的如果子組件定義了 props,打印的值就是剔除定義的屬性。

props: {
  width: {
    type: String,
    default: ''
  }
},
mounted() {
  console.log(this.$attrs) //{title: "這是標(biāo)題", height: "80", imgUrl: "imgUrl"}
},

$listeners：包含父作用域里 .native 除外的監(jiān)聽事件集合。如果還要繼續(xù)傳給子組件內(nèi)部的其他組件，就可以通過 v-on="$linteners"。

場(chǎng)景:子組件需要調(diào)用父組件的方法

解決:父組件的方法可以通過 v-on="$listeners" 傳入內(nèi)部組件——在創(chuàng)建更高層次的組件時(shí)非常有用

// 父組件
<home @change="change"/>

// 子組件
mounted() {
  console.log(this.$listeners) //即可拿到 change 事件
}

如果是孫組件要訪問父組件的屬性和調(diào)用方法,直接一級(jí)一級(jí)傳下去就可以。

7. $children / $parent

$children：獲取到一個(gè)包含所有子組件(不包含孫子組件)的 VueComponent 對(duì)象數(shù)組，可以直接拿到子組件中所有數(shù)據(jù)和方法等。

$parent：獲取到一個(gè)父節(jié)點(diǎn)的 VueComponent 對(duì)象，同樣包含父節(jié)點(diǎn)中所有數(shù)據(jù)和方法等

// Parent.vue
export default{
    mounted(){
        this.$children[0].someMethod() // 調(diào)用第一個(gè)子組件的方法
        this.$children[0].name // 獲取第一個(gè)子組件中的屬性
    }
}

// Child.vue
export default{
    mounted(){
        this.$parent.someMethod() // 調(diào)用父組件的方法
        this.$parent.name // 獲取父組件中的屬性
    }
}

$children和$parent 并不保證順序，也不是響應(yīng)式的，只能拿到一級(jí)父組件和子組件。

8. provide / inject

provide / inject 為依賴注入，主要為高階插件/組件庫(kù)提供用例。說是不推薦直接用于應(yīng)用程序代碼中，但是在一些插件或組件庫(kù)里卻是被常用，所以我覺得用也沒啥，還挺好用的。

provide：可以讓我們指定想要提供給后代組件的數(shù)據(jù)或方法

inject：在任何后代組件中接收想要添加在這個(gè)組件上的數(shù)據(jù)或方法，不管組件嵌套多深都可以直接拿來用

要注意的是 provide 和 inject 傳遞的數(shù)據(jù)不是響應(yīng)式的，也就是說用 inject 接收來數(shù)據(jù)后，provide 里的數(shù)據(jù)改變了，后代組件中的數(shù)據(jù)不會(huì)改變，除非傳入的就是一個(gè)可監(jiān)聽的對(duì)象

所以建議還是傳遞一些常量或者方法

// 父組件
export default{
    // 方法一 不能獲取 this.xxx，只能傳寫死的
    provide:{
        name:"RDIF",
    },
    // 方法二 可以獲取 this.xxx
    provide(){
        return {
            name:"RDIF",
            msg: this.msg // data 中的屬性
            someMethod:this.someMethod // methods 中的方法
        }
    },
    methods:{
        someMethod(){
            console.log("這是注入的方法")
        }
    }
}

// 后代組件
export default{
    inject:["name","msg","someMethod"],
    mounted(){
        console.log(this.msg) // 這里拿到的屬性不是響應(yīng)式的，如果需要拿到最新的，可以在下面的方法中返回
        this.someMethod()
    }
}

9. EventBus

EventBus 是中央事件總線，不管是父子組件，兄弟組件，跨層級(jí)組件等都可以使用它完成通信操作。

• 聲明一個(gè)全局Vue實(shí)例變量 EventBus , 把所有的通信數(shù)據(jù)，事件監(jiān)聽都存儲(chǔ)到這個(gè)變量上；
• 類似于 Vuex。但這種方式只適用于極小的項(xiàng)目；
• 原理就是利用emit 并實(shí)例化一個(gè)全局 vue 實(shí)現(xiàn)數(shù)據(jù)共享；
• 可以實(shí)現(xiàn)平級(jí)，嵌套組件傳值,但是對(duì)應(yīng)的事件名eventTarget必須是全局唯一的；

定義方式有三種：

// 方法一
// 抽離成一個(gè)單獨(dú)的 js 文件 Bus.js ，然后在需要的地方引入
// Bus.js
import Vue from "vue"
export default new Vue()

// 方法二 直接掛載到全局
// main.js
import Vue from "vue"
Vue.prototype.$bus = new Vue()

// 方法三 注入到 Vue 根對(duì)象上
// main.js
import Vue from "vue"
new Vue({
    el:"#app",
    data:{
        Bus: new Vue()
    }
})

使用如下，以方法一按需引入為例：

// 在需要向外部發(fā)送自定義事件的組件內(nèi)
<template>
    <button @click="handlerClick">按鈕</button>
</template>
import Bus from "./Bus.js"
export default{
    methods:{
        handlerClick(){
            // 自定義事件名 sendMsg
            Bus.$emit("sendMsg", "這是要向外部發(fā)送的數(shù)據(jù)")
        }
    }
}

// 在需要接收外部事件的組件內(nèi)
import Bus from "./Bus.js"
export default{
    mounted(){
        // 監(jiān)聽事件的觸發(fā)
        Bus.$on("sendMsg", data => {
            console.log("這是接收到的數(shù)據(jù)：", data)
        })
    },
    beforeDestroy(){
        // 取消監(jiān)聽
        Bus.$off("sendMsg")
    }
}

以方法二直接掛載在全局：

// 在 main.js
Vue.prototype.$eventBus=new Vue()

// 傳值組件
this.$eventBus.$emit('eventTarget','這是eventTarget傳過來的值')

// 接收組件
this.$eventBus.$on("eventTarget",v=>{
  console.log('eventTarget',v);//這是eventTarget傳過來的值
})

10. Vuex

• Vuex 是狀態(tài)管理器，集中式存儲(chǔ)管理所有組件的狀態(tài)。
• 適合數(shù)據(jù)共享多的項(xiàng)目里面,因?yàn)槿绻皇呛?jiǎn)單的通訊，使用起來會(huì)比較重。

state:定義存貯數(shù)據(jù)的倉(cāng)庫(kù) ,可通過this.$store.state 或mapState訪問。
getter:獲取 store 值,可認(rèn)為是 store 的計(jì)算屬性,可通過this.$store.getter 或 mapGetters訪問。
mutation:同步改變 store 值,為什么會(huì)設(shè)計(jì)成同步,因?yàn)閙utation是直接改變 store 值,vue 對(duì)操作進(jìn)行了記錄,如果是異步無(wú)法追蹤改變，可通過mapMutations調(diào)用。
action:異步調(diào)用函數(shù)執(zhí)行mutation,進(jìn)而改變 store 值,可通過 this.$dispatch或mapActions訪問。
modules:模塊,如果狀態(tài)過多,可以拆分成模塊,最后在入口通過...解構(gòu)引入。

這一塊內(nèi)容過長(zhǎng)，如果基礎(chǔ)不熟的話可以看這個(gè)Vuex，然后大致用法如下：

比如創(chuàng)建這樣的文件結(jié)構(gòu)

index.js 里內(nèi)容如下

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
import state from './state'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters,
  actions,
  mutations,
  state
})
export default store

然后在 main.js 引入

import Vue from "vue"
import store from "./store"
new Vue({
    el:"#app",
    store,
    render: h => h(App)
})

然后在需要的使用組件里

import { mapGetters, mapMutations } from "vuex"
export default{
    computed:{
        // 方式一 然后通過 this.屬性名就可以用了
        ...mapGetters(["引入getters.js里屬性1","屬性2"])
        // 方式二
        ...mapGetters("user", ["user模塊里的屬性1","屬性2"])
    },
    methods:{
        // 方式一 然后通過 this.屬性名就可以用了
        ...mapMutations(["引入mutations.js里的方法1","方法2"])
        // 方式二
        ...mapMutations("user",["引入user模塊里的方法1","方法2"])
    }
}

// 或者也可以這樣獲取
this.$store.state.xxx
this.$store.state.user.xxx

11. $root

$root 可以拿到 App.vue 里的數(shù)據(jù)和方法

// 父組件
mounted(){
  console.log(this.$root) //獲取根實(shí)例,最后所有組件都是掛載到根實(shí)例上
  console.log(this.$root.$children[0]) //獲取根實(shí)例的一級(jí)子組件
  console.log(this.$root.$children[0].$children[0]) //獲取根實(shí)例的二級(jí)子組件
}

12. slot

將父組件的 template 傳入子組件
分類:
A.匿名插槽(也叫默認(rèn)插槽): 沒有命名,有且只有一個(gè);

// 父組件
<todo-list> 
    <template v-slot:default>
       任意內(nèi)容
       <p>我是匿名插槽 </p>
    </template>
</todo-list> 

// 子組件
<slot>我是默認(rèn)值</slot>
//v-slot:default寫上感覺和具名寫法比較統(tǒng)一,容易理解,也可以不用寫

B.具名插槽: 相對(duì)匿名插槽組件slot標(biāo)簽帶name命名的;

// 父組件
<todo-list> 
    <template v-slot:todo>
       任意內(nèi)容
       <p>我是匿名插槽 </p>
    </template>
</todo-list> 

//子組件
<slot name="todo">我是默認(rèn)值</slot>

C.作用域插槽: 子組件內(nèi)數(shù)據(jù)可以被父頁(yè)面拿到(解決了數(shù)據(jù)只能從父頁(yè)面?zhèn)鬟f給子組件)

// 父組件
<todo-list>
 <template v-slot:todo="slotProps" >
   {{slotProps.user.firstName}}
 </template> 
</todo-list> 
//slotProps 可以隨意命名
//slotProps 接取的是子組件標(biāo)簽slot上屬性數(shù)據(jù)的集合所有v-bind:user="user"

// 子組件
<slot name="todo" :user="user" :test="test">
    {{ user.lastName }}
 </slot> 
data() {
    return {
      user:{
        lastName:"Zhang",
        firstName:"yue"
      },
      test:[1,2,3,4]
    }
  },
// {{ user.lastName }}是默認(rèn)數(shù)據(jù)  v-slot:todo 當(dāng)父頁(yè)面沒有(="slotProps")

13、路由傳參

1.方案一

// 路由定義
{
  path: '/describe/:id',
  name: 'Describe',
  component: Describe
}
// 頁(yè)面?zhèn)鲄?this.$router.push({
  path: `/describe/${id}`,
})
// 頁(yè)面獲取
this.$route.params.id

2.方案二

// 路由定義
{
  path: '/describe',
  name: 'Describe',
  component: Describe
}
// 頁(yè)面?zhèn)鲄?this.$router.push({
  name: 'Describe',
  params: {
    id: id
  }
})
// 頁(yè)面獲取
this.$route.params.id

3.方案三

// 路由定義
{
  path: '/describe',
  name: 'Describe',
  component: Describe
}
// 頁(yè)面?zhèn)鲄?this.$router.push({
  path: '/describe',
    query: {
      id: id
  `}
)
// 頁(yè)面獲取
this.$route.query.id

4.三種方案對(duì)比

方案二參數(shù)不會(huì)拼接在路由后面,頁(yè)面刷新參數(shù)會(huì)丟失
方案一和三參數(shù)拼接在后面,丑,而且暴露了信息

14、Vue.observable

用法：讓一個(gè)對(duì)象可響應(yīng)。Vue 內(nèi)部會(huì)用它來處理 data 函數(shù)返回的對(duì)象;
返回的對(duì)象可以直接用于渲染函數(shù)和計(jì)算屬性內(nèi)，并且會(huì)在發(fā)生改變時(shí)觸發(fā)相應(yīng)的更新;
也可以作為最小化的跨組件狀態(tài)存儲(chǔ)器，用于簡(jiǎn)單的場(chǎng)景。
通訊原理實(shí)質(zhì)上是利用Vue.observable實(shí)現(xiàn)一個(gè)簡(jiǎn)易的 vuex

// 文件路徑 - /store/store.js
import Vue from 'vue'

export const store = Vue.observable({ count: 0 })
export const mutations = {
  setCount (count) {
    store.count = count
  }
}

//使用
<template>
    <div>
        <label for="bookNum">數(shù) 量</label>
            <button @click="setCount(count+1)">+</button>
            <span>{{count}}</span>
            <button @click="setCount(count-1)">-</button>
    </div>
</template>

<script>
import { store, mutations } from '../store/store' // Vue2.6新增API Observable

export default {
  name: 'Add',
  computed: {
    count () {
      return store.count
    }
  },
  methods: {
    setCount: mutations.setCount
  }
}
</script>

參考資料

vue.js： https://v2.cn.vuejs.org/

vuex是什么：https://v3.vuex.vuejs.org/zh/

工作中要使用Git，看這篇文章就夠了：http://www.guosisoft.com/article/detail/410508049313861

企業(yè)數(shù)字化轉(zhuǎn)型如何做？看過來：http://www.guosisoft.com/article/detail/408745545576517

結(jié)語(yǔ)

如果本文對(duì)你有一點(diǎn)點(diǎn)幫助，點(diǎn)個(gè)贊支持一下吧，你的每一個(gè)【贊】都是我創(chuàng)作的最大動(dòng)力 ^_

更多技術(shù)文章請(qǐng)往:http://www.guosisoft.com/article，大家一起共同交流和進(jìn)步呀

前往了解國(guó)思RDIF低代碼開發(fā)平臺(tái)：http://www.guosisoft.com
文章來源地址http://www.zghlxwxcb.cn/news/detail-426841.html

到了這里，關(guān)于【干貨】Vue2.x 組件通信方式詳解，這篇講全了的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！