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: %;
        background-color: skyblue;
        text-align: center;
        position: relative;
        p{
            height: 30px;
            width: 800px;
            display: block;
            position: absolute;
            top: ;
            bottom: ;
            left: ;
            right: ;
            margin: auto;
            // transform: translate(-50%,-50%)
        }
        .parent{
        color:greenyellow;
        }
        .strong{
            position: absolute;
            bottom: ;
            left: %;
            transform: translateX(-%);
            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 = ''
    },
    components:{
        tc:testChild
    }
}
</script>
<style lang="scss" scoped></style>