寫vue，如果頁(yè)面涉及到多個(gè)組件，就會(huì)涉及組件之間的通信，可能是父子組件間的通信，也可以是同級(jí)組件間的通信，那么，vue里面的組件如何通信。

一般來(lái)說(shuō)在vue的數(shù)據(jù)傳遞是在父組件傳子組件通過(guò)屬性來(lái)傳，子組件傳父組件通過(guò)事件來(lái)傳值。

• 子組件通過(guò)通過(guò)this.$emit()的方式將值傳遞給父組件；
• 通過(guò)vuex來(lái)傳遞組件間的數(shù)據(jù)；
• 通過(guò)中央總線來(lái)傳遞組件間的數(shù)據(jù)；
• 通過(guò)修改父組件傳過(guò)來(lái)的對(duì)象屬性
• 父組件使用子組件的引用ref調(diào)用子組件的方法獲取子組件的數(shù)據(jù)

一、子組件通過(guò)this.$emit()的方式將值傳遞給父組件

父組件里面的子組件通過(guò)@func綁定一個(gè)函數(shù)來(lái)處理

子組件傳過(guò)來(lái)的數(shù)據(jù)

<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="給父組件傳遞值">
    </div>
</template>
<script>
export default {
 
    data () {
        return {
            //將msg傳遞給父組件
            msg: "我是子組件的msg",
        }
    },
     methods:{
         sendMsg(){
             //func: 是父組件指定的傳數(shù)據(jù)綁定的函數(shù)，this.msg:子組件給父組件傳遞的數(shù)據(jù)
             this.$emit('func',this.msg)
         }
     }
}
</script>

父組件

<template>
    <div class="app">
        <child @func="getMsgFormSon"></child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            msgFormSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
            getMsgFormSon(data){
                this.msgFormSon = data
                console.log(this.msgFormSon)
            }
    }
}
</script>

二、通過(guò)vuex來(lái)傳遞組件間的數(shù)據(jù)

vuex就是把數(shù)據(jù)放到內(nèi)存里面去，各個(gè)組件間都可以共享vuex里面的數(shù)據(jù)

1.在一個(gè)組件間調(diào)用this.$store.dispatch(‘findUserInfoList’, q_userInfo_form); 來(lái)觸發(fā)vuex里面函數(shù)修改vuex的數(shù)據(jù)，然后在另一個(gè)組件用計(jì)算屬性映射獲取vuex的這個(gè)屬性值，就可以實(shí)現(xiàn)組件間的數(shù)據(jù)傳遞

computed: mapState({
      //映射vuex的相關(guān)屬性值
      userInfoList: state => state.userInfoModule.userInfoList,
      start: state => state.userInfoModule.start,
      total: state => state.userInfoModule.total,
}),
method:{
      //查詢操作
      findUserInfoList: function(q_userInfoForm, start){
          this.q_userInfoForm.start = (start === null) ? 1 : start;
          this.$store.dispatch('findUserInfoList', q_userInfo_form);
      },
}

三、通過(guò)中央總線來(lái)傳遞組件間的數(shù)據(jù)

對(duì)于一些簡(jiǎn)單的項(xiàng)目里的可能又不是父子組件，可能是同級(jí)組件的，另一方面又沒(méi)有必要使用Vuex，針對(duì)這種情形可以使用中央事件總線（Event Bus）來(lái)解決問(wèn)題，主要用到vue對(duì)象的$on和$emit事件，在同一個(gè)vue的實(shí)例可以觸發(fā)這兩個(gè)事件，比如子組件傳遞數(shù)據(jù)到父組件，在子組件通過(guò)同一個(gè)vue對(duì)象觸發(fā)$emit事件傳遞數(shù)據(jù)，在父組件通過(guò)vue實(shí)例的$on監(jiān)聽(tīng)剛剛emit觸發(fā)的事件來(lái)獲取子組件傳遞過(guò)來(lái)的數(shù)據(jù)

先創(chuàng)建一個(gè)constantsBus.js文件，里面根據(jù)不同模塊創(chuàng)建相關(guān)的vue實(shí)例

/**
 *  不同組件間通訊用的 中央事件總線
 */

import Vue from 'vue';

//用戶管理總線
export const userBus = new Vue();

//管理員管理總線
export const adminBus = new Vue();

在一個(gè)組件間調(diào)用$emit傳遞數(shù)據(jù)

//引用剛剛創(chuàng)建的constantsBus.js
import * as constantsBus from '@/common/constantsBus';

在另個(gè)接收數(shù)據(jù)的組件用$on來(lái)監(jiān)聽(tīng)獲取emit傳過(guò)來(lái)的數(shù)據(jù)

created() {
      let that = this;
      //監(jiān)聽(tīng)子組件的事件,獲取其他組件傳遞過(guò)來(lái)的data數(shù)據(jù)
      constantsBus.processBus.$on('processChooseAssessor', data => {
          //獲取emit觸發(fā)的processChooseAssessor事件傳遞過(guò)來(lái)的data數(shù)據(jù)
      });
},

四、通過(guò)修改父組件傳過(guò)來(lái)的對(duì)象屬性

一般來(lái)說(shuō)在vue的數(shù)據(jù)傳遞是在父組件傳子組件通過(guò)屬性來(lái)傳,但是通過(guò)屬性來(lái)傳值，是單向的，子組件不能修改父組件的prop值，如果在子組件里面修改父組件傳過(guò)來(lái)的prop屬性值，會(huì)報(bào)錯(cuò)，但是也有例外，對(duì)象類型的除外，如果父組件傳給子組件的屬性是對(duì)象的話，是可以修改對(duì)象里面的值的，并且修改后也對(duì)父組件可見(jiàn)，因?yàn)閷?duì)象的話最后的引用都是指向同一塊內(nèi)存，不受子組件不可以修改父組件的屬性約束。（不過(guò)不建議這樣處理，子組件可以修改父組件的屬性會(huì)污染數(shù)據(jù)傳遞，可能以后在那個(gè)子組件改了都不知道，一般對(duì)象的傳遞要深拷貝）

五、父組件使用子組件的引用ref

調(diào)用子組件的方法獲取子組件的數(shù)據(jù)

1.在子組件寫一個(gè)獲取數(shù)據(jù)的方法

2.父組件通過(guò)子組件的ref調(diào)用這個(gè)方法獲取子組件的數(shù)據(jù)

<trademark-file-upload ref="trademarkFileUpload" :uploadFileList="uploadFileList"></trademark-file-upload>

<script>
let fileList = this.$refs.trademarkFileUpload.getFileList();
<script>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論