uni-app通信方式

一，组件间传值包括下面三种情况：

1,父组件给子组件传值

2,子组件给父组件传值

3,兄弟组件通讯

二 代码
1 父组件 index.vue

<template>
    <view class="content">
        <!-- 1 父组件给子组件传值——设参 -->
        <!-- 3 子给父传参 -->
        <test v-if="flag" :title="title" @myEvent="getNum"></test>
        <button type="primary" @click="checkTest">切换test组件</button>
        这是子组件传递过来的数据{{num}}
        <testA></testA>
        <testB></testB>
    </view>
</template>
 
<script>
    /* 引入组件 */
    import test from '../../components/test.vue'
    import testA from '../../components/a.vue'
    import testB from '../../components/b.vue'
    export default {
        data() {
            return {
                title: 'Hello',
                flag: true,
                num:0
            }
        },
        onLoad() {
            console.log('页面加载了')
        },
        onShow() {
            console.log('页面显示了')
        },
        onReady() {
            console.log('页面初次渲染完成了')
        },
        onHide() {
            console.log('页面隐藏了')
        },
        methods: {
            checkTest() {
                this.flag = !this.flag
            },
            // 4 子给父传参
            getNum(num){
                this.num = num
                console.log(num)
            }
        },
        // 组件组件
        components: {
            test: test,
            testA:testA,
            testB:testB
        }
    }
</script>
 
<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
 
    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }
 
    .text-area {
        display: flex;
        justify-content: center;
    }
 
    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

2 子组件 test.vue

<template>
    <view id="myview">
        这是test组件{{num}}
        <!-- 3 父项子传值-用参  -->
        这是父组件传递过来的数据{{title}}
        <!-- 1 子给父传值 -->
        <button @click="sendNum">给父组件传值</button>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                num: 3,
                intId: null
            };
        },
        // 2 父给子传值-接参
        props:['title'],
        methods:{
            sendNum(){
                console.log('给父亲传值')
                // 2 子给父传值
                this.$emit('myEvent',this.num)
            }
        },
        beforeCreate() {
            console.log('实例已经开始初始化了,但数据还没初始化完成，页面也没开始渲染')
            console.log(this.num)
        },
        created() {
            // 在这个里面初始化数据
            console.log('实例创建完成后被立即调用')
            console.log(this.num)
            // this.intId = setInterval(() => {
            //  console.log('执行定时器')
            // }, 1000)
        },
        beforeMount() {
            console.log('在挂载开始前被调用', document.getElementById('myview'))
        },
        mounted() {
            // 在这个里面操作dom
            console.log('挂载已完成', document.getElementById('myview'))
        },
        destroyed() {
            console.log('组件销毁了')
            // 清空定时器
            clearInterval(this.intId)
        }
    }
</script>
 
<style>
 
</style>

3 兄弟组件 a.vue

<template>
    <view>
        这是a组件
        <!-- 1 兄弟组件传值 -->
        <button @click="addNum">修改b组件的数据</button>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                
            };
        },
        methods:{
            addNum(){
                // 2 兄弟组件传值
                uni.$emit('updateNum',10)
            }
        }
    }
</script>
 
<style>
 
</style>

4 兄弟组件 b.vue

<template>
    <view>
        <!-- 4 兄弟组件传值 -->
        这是b组件的数据：{{num}}
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                num: 0
            };
        },
        created() {
            // 兄弟组件传值
            uni.$on('updateNum', num => {
                this.num += num
            })
        }
    }
</script>
 
<style>
 
</style>