Vue and his son pass component value $ parent, ref, $ refs

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>

 

Guess you like

Origin www.cnblogs.com/it-Ren/p/11335040.html