25-父子之间的传值

父组件给子组件传值
index.vue

<template>
    <view class="content">
        <test v-if="flag" :title='title' @myEvent='getNum'></test>
        <button type="default" @click="checkTest">切换test组件</button>
        这是子组件传递过来的数据{{num}}
        <test-a></test-a>
        <test-b></test-b>
    </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(options) {
            console.log('页面加载了',options)
        },
        onShow(){
            console.log('页面显示了')
        },
        onReady() {
            console.log('页面初次渲染完成了')
        },
        onHide() {
            console.log('页面隐藏了')
        },
        methods: {
            checkTest(){
                this.flag = !this.flag
            }
        },
        components:{
            test,
            "test-a":testa,
            "test-b":testb
        },
        methods:{
            getNum(num){
                this.num = num
            }
        }
    }
</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>

test.vue

<template>
    <view id='myView'>
        这是test组件{{num}}
        这是父组件传递过来的数据{{title}}
        <button type="default" @click="sendNum">给父组件传值</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                num:3,
                intId:null
            };
        },
        props:['title'],
        beforeCreate(){  
            console.log("实例已经开始初始化了")
            console.log(this.num)  //这里没有定义
        },
        created() {    //一般用来数据的初始化
            console.log('created',this.num)
            this.intId = setInterval(()=>{
                console.log('执行定时器')
            },1000)
        },
        beforeMount() {
            console.log('beforemount',document.getElementById('myView'))
        },
        mounted() {
            console.log('beforemount',document.getElementById('myView'))
        },
        destroyed() {
            console.log('组件销毁了')
            clearInterval(this.intId)  //清除定时器
        },
        methods:{
            sendNum(){
                console.log('给父亲传值')
                this.$emit('myEvent',this.num)
            }
        }
    }
</script>
<style lang="scss">
</style>

a.vue

<template>
    <view>
        这是a组件：<button type="default" @click="addNum">修改B组件的数据</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
            };
        },
        methods:{
            addNum(){
                uni.$emit('updateNum',10)
            }
        }
    }
</script>
<style>
</style>

b.vue

<template>
    <view>
        这是B组件的数据：{{num}}
    </view>
</template>
<script>
    export default {
        data() {
            return {
                num:0
            };
        },
        created() {
            uni.$on('updateNum',num=>{
                this.num += num
            })
        },
        methods:{
        }
    }
</script>
<style>
</style>

• 父传子

• 子传父

• 同类传参

$emit发送 $on监听