uni-app組件之間的通訊--父子/兄弟組件之間傳遞數據

$emit、$on、$off常用於跨頁面、跨組件通訊

uni.$emit(eventName,OBJECT)  觸發全局的自定事件。

uni.$on(eventName,callback)  監聽全局的自定義事件。事件可以由 uni.$emit 觸發，回調函數會接收所有傳入事件觸發函數的額外參數。

uni.$off([eventName, callback])  移除全局自定義事件監聽器

一、父組件給子組件傳遞數據

子組件通過props接收外界傳遞到組件內部的值

// 父 index.vue   通過屬性綁定進行傳遞  v-bind:簡寫為:

<test  :title="title" ></test>
data() {
        return {
            title:'Hello',
        }
    },

// 子組件 test.vue   通過props接收
<template>
    <view>這是父組件傳遞過來的數據{{title}} </view>
</template>

    export default {
        props:['title'],//接收
    }

二、子組件向父組件傳值

通過$emit觸發事件進行傳遞參數

// 子組件 test.vue  傳值num
<template>
    <view>
        子組件點擊按鈕觸發給父組件傳值
        <button @click="sendNum">給父組件傳值</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                num:'3',
            };
        },
        props:['title'],//接收
        methods:{
            sendNum(){this.$emit('myEven',this.num) //給父組件傳值
        },
    }
</script>    

// index.vue  父組件接收num 
<view class="content">
    <test  :title="title" @myEven= 'getNum'></test>{{num}}
</view>
export default {
       data() {
            return {
                num:0,//默認0
            }
        },
        methods: {
        getNum(num){
            console.log(num)
    　　　　　this.num = num
        }
    },
}    

三、兄弟組件之間通訊

a.創建組件a，b，引入index.vue, components注冊

// index .vue  頁面展示組件內容
<script>
    import test from '../../components/test.vue'
    import testA from '@/components/a.vue'
    import testB from '@/components/b.vue'
    export default {
        components:{
            test,
            "test-a":testA,
            "test-b":testB,
        },
    }
</script>
<template>
    <view class="content">
        <test-a></test-a>
        <test-b></test-b>
    </view>
</template>

b.通過uni.$on注冊一個全局監聽事件，通過uni.$emit觸發全局監聽事件

//a組件 a.vue
<template>
    <view><button @click="addNum">修改b組件數據</button></view>
</template>

<script>
    export default {
        methods:{
            addNum(){
                uni.$emit('changeNum',10) //觸發全局變量自定義事件changeNum，該函數為b組件內修改b組件內容的方法  
　　　　　　　　} 
　　　　　　} 
　　} 
</script>

 

//b組件 b.vue  a組件更改該組件內容
<template>
    <view>
        數據{{num}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                num:0,
            };
        },
        created(){ //創建全局監聽自定義事件  改變內容
            uni.$on('changeNum',num=>{
                this.num+=num
            })
        },
    }
</script>