Vue組件之間數據共享淺析

更新時間：2022年11月23日 14:24:15 作者：亦世凡華、

本文章向大家介紹vue組件中的數據共享，主要包括vue組件中的數據共享使用實例、應用技巧、基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下

組件數據共享

組件之間的關系：在項目開發(fā)中，組件之間的最常用的關系分為兩種：父子關系和兄弟關系。

父組件向子組件共享數據

通過自定義屬性實現父向子傳值。

子組件向父組件共享數據

通過自定義事件實現子向父傳值

兄弟組件共享數據

在 vue2.x中，兄弟組件之間數據共享方案是 EventBus。

EventBus的使用步驟：

1）創(chuàng)建eventBus.js模塊，并向外共享一個Vue的實例對象

import Vue from 'vue'
// 向外共享 Vue 的實例對象
export default new Vue()

2）在數據發(fā)送方，調用bus.$emit('事件名稱',要發(fā)送的數據)方法觸發(fā)自定義事件

<template>
    <div class="left-container">
        <h3>Left組件--{{count}}</h3>
        <button @click="send">點擊給Right發(fā)送數據</button>
    </div>
</template>
<script>
    // 1.導入 eventBus.js 模塊
    import bus from './eventBus' 
    export default{
        data(){
            return {
                // 兄弟組件要傳送的數據
                str:'我想對你說：hello world'
            }
        },
        methods:{
            send(){
                // 2.通過eventBus來發(fā)送數據
                bus.$emit('share',this.str)
            }
        }
    }
</script>
<style lang="less" scoped>
    h3{
        color: #f00;
    }
    .left-container{
        padding: 0 20px 20px;
        background-color: orange;
        min-height: 250px;
        flex: 1;
    }
    ::v-deep h5{
        color:#00f
    }
</style>

3）在數據接受方，調用bus.$on('事件名稱',事件處理函數)方法注冊一個自定義事件

<template>
    <div class="right-container">
        <h3>Right組件</h3>
        {{msgFromLeft}}
    </div>
</template>
<script>
    // 1.導入 eventBus.js 模塊
    import bus from './eventBus'
    export default{
        data(){
            return {
                // 兄弟組件要接受的數據
                msgFromLeft:""
            }
        },
        created(){
            bus.$on('share',val=>{
                this.msgFromLeft = val
                // console.log('在Right組件中定義的share被觸發(fā)了！',val);
            })
        }
    }
</script>
<style>
    .right-container{
        padding: 0 20px 20px;
        background-color: orange;
        min-height: 250px;
        flex: 1;
    }
</style>