Subassembly
1 <template> 2 <div class="child"> 3 <slot name='meiyong'></slot> 4 <p >我是子组件哟 {{num}} {{ttttt}} {{nike}}</p> 5 <slot name="strong"></slot> 6 </div> 7 </template> 8 <script> 9 import Utils from '@/utils/utils' 10 export default { 11 props:['ttttt','nike'], 12 data(){ 13 return { 14 num:" " 15 } 16 }, 17 mounted(){ 18 //传值给父组件 19 this.$parent.runTime= Utils.formatDate(new Date(), "YYYY-MM-DD hh:mm:ss"); 20 } 21 22 } 23 </script> 24 <style lang="scss" scoped> 25 .child{ 26 height: 5rem; 27 width: 100%; 28 background-color: skyblue; 29 text-align: center; 30 position: relative; 31 p{ 32 height: 30px; 33 width: 800px; 34 display: block; 35 position: absolute; 36 top: 0; 37 bottom: 0; 38 left: 0; 39 right: 0; 40 margin: auto; 41 // transform: translate(-50%,-50%) 42 } 43 .parent{ 44 color:greenyellow; 45 } 46 .strong{ 47 position: absolute; 48 bottom: 0; 49 left: 50%; 50 transform: translateX(-50%); 51 color: darkmagenta; 52 } 53 } 54 </style>
Parent component:
<Template> <div> <- father to son -!> <TC: ttttt = ' MongoDB ' REF = " ttttt " : = Nike ' Nike ' > <V-slot Template: meiyong> <h1 of class = " parent " > content v-slot is useless? Oh </ h1> </ Template> <Template v-slot: strong> <h2 class = " strong " > you strong? ? ? Runtime} {} {</ H2> </ Template> </ Template> <Script> Import testChild from ' @ / views / testChild ' Export default { Data () { return { ttttt: ' █ I parent component values given █ child pass ' , MongoDB: ' █ I MongoDB yo █ ' , Nike: ' ███ ███ Just do ' , Runtime: ' null ' } }, Mounted () { // value of the num ref so to not pass to pass the this $ refs.ttttt.num =. ' 1949 ' }, components:{ tc:testChild } } </script> <style lang="scss" scoped> </style>