vue中組件之間相互通信傳值的幾種方法詳解

vue中組件之間相互通訊傳值的方式

我們在使用vue進行項目開發的時候為瞭更好地管理項目,我們會把每個功能封裝成一個個的組件,在使用的時候直接引入並且調用組件來實現代碼的復用。

我們在封裝組件的時候經常會留有一些預留的接口,供使用的時候調用和傳入不同的數據,這個時候我們就涉及到瞭組件之前的相互傳值的問題。

我這裡總結瞭在vue中組件之前相互傳值的方法:

1、子組件和父組件通訊,通過調用父組件給組件自定義屬性值來實現

<!--parent.vue-->
<template>
    <div>
        <h4>我是父組件:</h4>
        <p>這是我自己的數據{{num}}</p>
        <!--通過給子組件傳入自定義屬性值,傳數據用v-bind或者簡寫形式:號, 傳方法可以使用v-on或者簡寫@符綁定事件-->
        <child :p-num="num" :p-num2="num2" @changePNum="changeNum" />
    </div>
</template>
<script>
    import child from './child.vue'
    export default{
        name: 'parent',
        data(){
            return{
                num: 10,
                num2: 20
            }
        },
        methods:{
            changeNum(n){
                this.num = n;
            }
        }
    }
</script>
<!--child.vue-->
<template>
    <div>
        <h4>我是子組件:</h4>
        <!--第一種可以使用props對象來接收父級傳過來的屬性-->
        <p>這是通過props接收父級組件傳過來的數據{{ pNum}}</p>
        <!--第二種是通過元素的實例屬性$attrs獲取,沒有唄props接收的剩餘屬性-->
        <p>這是通過組件中的$attrs對象獲取父級組件傳過來的數據{{ $attrs['p-num2']}}</p>
        <!--第三種是通過當前實例中的$parent屬性拿到父級實例對象-->
        <p>這是通過組件中的$attrs對象獲取父級組件傳過來的數據{{ topNum }}</p>
        <button @click="changeNum">通過$emit改變父級的數據</button>
        <button @click="changeNum2">通過$listeners改變父級的數據</button>
        <button @click="changeNum3">通過$parent改變父級的數據</button>
    </div>
</template>
<script>
    export default{
        name: 'child',
        // 第一種可以使用props對象來接收父級傳過來的屬性
        props:{
            // 這裡寫對應的要接收的屬性名以駝峰的形式接收
            pNum: {
                type: Number
            }  
        },
        data(){
            return {
                topNum: 0
            }
        },
        created(){
            // 通過使用實例中的$parent拿到父級組件的實例,然後獲取值
            this.topNum = this.$parent.num;  
        },
        methods:{
            changeNum(){
                // 這裡是通過當前組件中的$emit方法來調用父級傳過來的方法,並且可以傳入參數
                this.$emit('changePNum', 40);
            },
            changeNum2(){
                // 通過組件中的$listeners中的存儲的父級傳過來的方法進行調用
                this.$listeners.changePNum(50);
            },
            changeNum3(){
                // 通過組件中的$listeners中的存儲的父級傳過來的方法進行調用
                this.$parent.changeNum(60);
            }
        }
    }
</script>

上邊的代碼展示瞭兩種不同形式的組件之間的通訊方式,父組件傳值方式相同,子組件獲取操作方式不同

1.props/$emit組合方式:子組件通過定義props值拿到父組件傳給子組件的屬性來獲取;子組件通過使用$emit方法調用父組件的方法;

2.$attrs/$listeners組合方式:子組件可以通過$attrs屬性中的值拿到父組件傳給子組件的屬性值,它裡邊存儲的是props之外的屬性值;

3.$parent方法獲取父組件中的數據和方法

2、父組件主動獲取子組件數據

<!--parent-->
<template>
    <div>
        <button @click="changeChildANum">通過$refs調用子組件方法更改子組件數據</button>
        <button @click="changeChildBNum">通過$children調用子組件方法更改子組件數據</button>
        <p>這是獲取的子組件childA的數據:{{childA_num}}</p>
        <p>這是獲取的子組件childB的數據:{{childB_num}}</p>
        <!--這裡通過使用ref把組件示例註冊到當前組件的$refs中-->
        <child-a ref="childA"/>
        <child-b />
    </div>
</template>
<script>
    import childA from './childA.vue';
    import childB from './childA.vue';
    export default{
        components:{
            childA,
            childB
        },
        data(){
            return {
                childA_num: 0,
                childB_num: 0
            }
        },
        created(){},
        mounted(){
            // $refs 和 $children 都是需要在mounted中才能獲取到
            // 這裡通過$refs獲取註冊在裡邊的子組件實例,並且獲取他的數據
            this.childA_num = this.$refs.childA.num
            // 第二種方式通過當前組件示例中的$children獲取子組件實例
            this.childB_num = this.$children[1].num;
        },
        methods:{
            changeChildANum(){
                // 這裡通過使用$refs中的組件實例調用組件中的方法
                this.$refs.childA.changeNum();
            },
            changeChildBNum(){
                // 這裡通過使用$refs中的組件實例調用組件中的方法
                this.$children[1].changeNum();
            }
        }
    }
</script>
<!--child-->
<template>
    <div></div>
</template>
<script>
    export default{
        name: 'childA',
        data(){
            return{
                num: 10
            }
        },
        methods:{
            changeNum(){
                this.num++;
            }
        }
    }
</script>

1.ref/$refs方式,通過給引入的組件定義一個ref屬性,然後就可以通過$refs結合該屬性值得到當前組件的實例

2.ref/$children屬性,給組件定義ref值後,當前組件實例中會在this.$children中拿到所有定義瞭ref的組件數組,我們在通過下標進行獲取某個子組件的方法後者屬性值。

3、使用provide/inject方法實現

<!--parent.vue-->
<template>
    <div>
        <child />
    </div>
</template>
<script>
    import child from './child.vue';
    export default{
        // 通過給父級定義一個provide對象,並且定義成一個函數形式,然後返回一個parentData對象,並且對象指向當前組件的一個數據對象上,這樣相當於都指向一個對象
        provide(){
            return {
                parentData: this.proVideData
            }
        }
        name: 'Parent',
        components:{
            child
        },
        data(){
            return{
                proVideData: {
                    num, 1,
                    changeNum: null
                }
            }
        },
        created(){
            // 然後通過實例化後把需要被子組件調用到的方法傳入進去
            this.proVideData.changeNum = this.changeNum;
        },
        methods:{
            changeNum(){
                this.proVideData.num++;
            }
        }
    }
</script>
<!--child.vue-->
<template>
    <div>
        <p>{{parentData.num}}</p>
        <button @click="parFun">調用父級的方法</button>
    </div>
</template>
<script>
    export default{
        // 子組件通過inject接到祖先組件中的provide廣播的數據
        inject:['parentData'],
        name: 'child',
        data(){
            return{
            }
        },
        methods:{
           parFun(){
                // 這裡直接執行存儲下來的方法
               this.parentData.changeNun();
           } 
        }
    }
</script>

這種方式適合層級比較深的組件傳值,這裡的基本原理是,通過給祖先組件配置provide屬性,然後把想要傳給後代組件的屬性值,進行存儲;
然後在後代組件中,那個需要拿到傳播的數據,可以給組件本身配置injuct屬性,來接收想要監聽的數據值;

然後就可以進行通信瞭

4、使用事件總線

此方發可以在任意組件中進行監聽當前定義的方法。來實現,組件間相互通信

<!--event-bus.js-->
import Vue from 'vue';
// 這裡從創建瞭一個新的vue實例對象
export const EventBus = new Vue();
<!--parent.vue-->
<template>
    <div>
    </div>
</template>
<script>
// 這裡引入事件總線
import { EventBus } from './event-bus';
export default{
    data(){
        return{
            eventBusMsg: ''
        }
    },
    created(){
        // 然後給事件總線綁定一個需要監聽的方法,類似於發佈訂閱者的增加訂閱
        EventBus.$on("eventBusMsg", (msg) => {
            console.log(msg);
            this.eventBusMsg = msg;
        });
    },
    beforeDestroy(){
         EventBus.$small("eventBusMsg");
    }
}
</script>
<!--sub.vue後代組件-->
<template>
    <div>
        <button @click="eventBusChange">通過事件總線調用組件的方法</button>
    </div>
</template>
<script>
// 其他組件也需要你引入該插件
import { EventBus } from './event-bus';
export default{
    data(){
    },
    created(){
    },
    methods:{
        eventBusChange(){
            //這裡是通過eventBus來調用一個訂閱的消息方法,並傳入值過去
            EventBus.$emit('eventBusMsg', 'childB');
        }
    }
}
</script>

事件總線的調用方式是:

1.定義一個全局的vue示例並導出;

2.然後在需要監聽某個事件的組件中引入event-bus

3.給當前的組件在created方法中增加方法

4.然後子組件可以通過引入event-bus文件然後通過EventBus.$emit方式執行監聽的時間方法

5、vuex\localStorage\sessionStorage

還可以使用Vuex、本地存儲等方式來實現全局公用。

總結

本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!  

推薦閱讀: