Use vue slots

1 : If you call sub-components, you can just pass a content, you can not solt property, equivalent to default
 <Child-the Component> 
    <div> // Look here 
        I was a class of people, 
        I was the default slot
     </ div> 
</ Child-the Component> 
Vue.component ( 'Child-the Component' , { 
    Template: `
         <div> 
        <h4> this world is not only a man and a woman </ h4> 

        <slot> </ slot> // see here 
        </ div>         ` 
})

2 : Naming slot
 <div the above mentioned id = "App"> 
    <Child-the Component> 
        <Template slot = "Girl">   // Look here, 
            beautiful, beautiful, shopping, shopping
         </ Template> 
        <div> 
            I was a class of people, 
            I am a default slot
         </ div> 
    </ Child-the Component> 
</ div> 
Vue.component ( 'Child-the Component' , { 
    Template: `
         <div> 
        <h4> this world is not only a man and a woman </ h4 > 

        <slot name = "Girl"> </ slot> // see where 

        <slot> </ slot> 
        </ div>     ` 
})

3 : Scope Slot
 <div ID = "the root"> 
    <Child> 
        <template slot-scope = "The props"> <- - defines a slot, which must be placed within the template tag!> 
            <Li > {{props.value}} </ li> <-! definitions used rendering -> 
        </ Template> 
    </ Child> 
    <Child> 
        <Template slot-scope = "The props"> 
            <h1 of> {{The props .value}} </ h1> < - - different definition rendering!> 
        </ Template> 
    </ Child> 
</ div> 
<Script> 
    Vue.component ( 'Child' , { 
        Data: function () {
             return { 
                List:[1,2,3,4]
            }
        },
        template: `<div> 
                        <ul> 
                            <slot V- for = "value in List": value = value> // use slot placeholder attribute value here and then bound all stored inside the top props 
                            </ slot> 
                        </ ul> 
                    </ div> `     })
     var VM = new new Vue ({ 
        EL: '#root' 
    }) </ Script>

Guess you like