Vue父子组件传值$parent , ref,$refs，props大总结

子组件：

<template>
    <div class="child">
        <slot name='meiyong'></slot>
        <p >我是子组件哟 {{num}} {{ttttt}} {{nike}} 这是我独有的----->{{isChi}} </p>
        <slot name="strong"></slot>
    </div>
</template>
<script>
import Utils from '@/utils/utils'
export default {
    props:['ttttt','nike'],
    data(){
        return {
            num:" ",
            isChi:'★子组件独有★'
        }
    },
    mounted(){
        //传值给父组件
        this.$parent.runTime= Utils.formatDate(new Date(), "YYYY-MM-DD hh:mm:ss");
    }
    
}
</script>
<style lang="scss" scoped>
    .child{
        height: 5rem;
        width: 100%;
        background-color: skyblue;
        text-align: center;
        position: relative;
        p{
            height: 30px;
            width: 800px;
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            // transform: translate(-50%,-50%)
        } 
        .parent{
        color:greenyellow;
        }
        .strong{
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            color: darkmagenta;
        }
    }
</style>

 

父组件：

<template>
    <div >
    <!-- 父传子-->
        <tc :ttttt='mongodb'  :nike='nike' ref="toChild">
            <template v-slot:meiyong >
                 <h1 class="parent">v-slot中的内容    没用？呵呵</h1>
            </template>
            <template v-slot:strong>
                <h2 class="strong">你很强？？？{{runTime}} </h2>
            </template>
        </tc>
    </div>
</template>
<script>
import testChild from '@/views/testChild'
export default {
    data(){
        return {
            ttttt:'█我是父组件给child传的值█',
            mongodb:'█我是MongoDB哟█',
            nike:'███ just do ███',
            runTime:'null'
        }
    },
    mounted(){
        let chi = this.$refs.toChild
        console.log('chi===>',chi.isChi);  
        this.$refs.toChild.isChi = '我试试能不能修改子组件的值'
       
        // num不是传的值 所以要ref才能传
        this.$refs.ttttt.num = '1949'
    },
    components:{
        tc:testChild
    }
}
</script>
<style lang="scss" scoped>
   
</style>