快捷導(dǎo)航

Vue組件之間數(shù)據(jù)共享淺析

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

本文章向大家介紹vue組件中的數(shù)據(jù)共享，主要包括vue組件中的數(shù)據(jù)共享使用實(shí)例、應(yīng)用技巧、基本知識(shí)點(diǎn)總結(jié)和需要注意事項(xiàng)，具有一定的參考價(jià)值，需要的朋友可以參考一下

組件數(shù)據(jù)共享

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

父組件向子組件共享數(shù)據(jù)

通過(guò)自定義屬性實(shí)現(xiàn)父向子傳值。

子組件向父組件共享數(shù)據(jù)

通過(guò)自定義事件實(shí)現(xiàn)子向父?jìng)髦?/p>

兄弟組件共享數(shù)據(jù)

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

EventBus的使用步驟：

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

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

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

<template>
    <div class="left-container">
        <h3>Left組件--{{count}}</h3>
        <button @click="send">點(diǎn)擊給Right發(fā)送數(shù)據(jù)</button>
    </div>
</template>
<script>
    // 1.導(dǎo)入 eventBus.js 模塊
    import bus from './eventBus' 
    export default{
        data(){
            return {
                // 兄弟組件要傳送的數(shù)據(jù)
                str:'我想對(duì)你說(shuō)：hello world'
            }
        },
        methods:{
            send(){
                // 2.通過(guò)eventBus來(lái)發(fā)送數(shù)據(jù)
                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）在數(shù)據(jù)接受方，調(diào)用bus.$on('事件名稱',事件處理函數(shù))方法注冊(cè)一個(gè)自定義事件

<template>
    <div class="right-container">
        <h3>Right組件</h3>
        {{msgFromLeft}}
    </div>
</template>
<script>
    // 1.導(dǎo)入 eventBus.js 模塊
    import bus from './eventBus'
    export default{
        data(){
            return {
                // 兄弟組件要接受的數(shù)據(jù)
                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>