Uniapp兄弟組件傳值

兄弟組件a.vue和b.vue之間的傳值方式

a.vue
<template>
    <view class="a">
        <text>我是A組件</text>
        <button type="default" @click="numAdd">修改B組件的值</button>
        num: {{num}}
    </view>
</template>

<script>
    export default {
        data() {
            return {
                num: 0
            }
        },
        methods: {
            numAdd() {
                uni.$emit("numAdd", 10)
                this.num += 10
            }
        }
    }
</script>
b.vue
<template>
    <view style="height: 50px;">
        <text>我是B組件: {{num}}</text>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                num: 0
            }
        },
        created() {
            uni.$on('numAdd', n => {
                this.num += n
            })
        },
        methods: {
            
        }
    }
</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章