Uniapp兄弟组件传值

2021-10-28  本文已影响0人  锋叔

兄弟组件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>

上一篇 下一篇

猜你喜欢

热点阅读