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>