There are two ways to insert content into a component

• Drawback
• Sub components

demo using slot points to insert content into components

　　Vue.component('Parent',{
        template:`  <!--Back quotes are better than Quotes-->
        <div>
            <p>hello</p>
            <slot></slot>   <!--If you want to insert elements and contents in components later, you need to leave slot points first, not directly insert them-->
        </div>
        `
    })
    
        
    new Vue({
        el:'#app',
        template:`
        <div>
            <parent>   <!--Use parent assembly-->
                <p>I am chy </p>  <!--When using components, the innerHtml Replace slot points as a whole-->
                <p>nice to meet you</p>  <!--There must be a slot, otherwise innerHtml I don't know where to put it-->
            </parent>
        </div>
        `
    });

When the slot point has no name set, the entire innerHtml will be inserted into the slot point when the component label is used. Slot is a dynamic dom. innerHtml inserts as much content as it has.

If the slot point is not set, 2 < p > elements cannot be inserted into the component.

demo slot point setting name

　　Vue.component('Parent',{
        template:`
        <div>
            <p>hello</p>
            <slot name="info"></slot>   <!--Slot point set name-->
        </div>
        `
    })
    
        
    new Vue({
        el:'#app',
        template:`
        <div>
            <parent>   <!--Use parent assembly-->
                <p slot="info">I am chy </p>  <!--If the slot point is set name，You must specify the slot point to insert-->
                <p>nice to meet you</p>  <!--No slot point specified for this, invalid-->
            </parent>
        </div>
        `
    });
        

demo parent child component

　　Vue.component('Child',{
        template:`
        <div>
            <p>I am chy</p>
            <p>nice to meet you</p>
        </div>
        `
    })

    Vue.component('Parent',{
        template:`
        <div>
            <p>hello</p>
            <child></child>   <!--Sub components-->
        </div>
        `
    })
    
        
    new Vue({
        el:'#app',
        template:`
        <div>
            <parent></parent>
        </div>
        `
    });

demo gets the parent and child component objects

　　//Sub components
    Vue.component('Child',{
        template:`
        <div>
            <p>I am chy</p>
            <p>nice to meet you</p>
        </div>
        `,
        data(){
            return {
                msg:'this is the child'
            }
        },
        mounted() {  //lifePeriodic method, dom Load complete
            console.log(this.$parent);  //Access parent component object|Example
        }
    })


    // Parent component
    Vue.component('Parent',{
        template:`
        <div>
            <p>hello</p>
            <child ref="son"></child>   <!-- ref Give a name to a reference to a subcomponent -->
        </div>
        `,
        data(){
            return {
                msg:'this is the parent'
            }
        },
        mounted() {
            console.log(this.$refs.son);  //Accessing subcomponent objects|Example: this.$refs.Subcomponents ref Attribute value
        }
    })
    
        
    new Vue({
        el:'#app',
        template:`
        <div>
            <parent></parent>
        </div>
        `
    });

As long as any element in the current dom uses the ref attribute, you can use this.$refs.ref attribute value to get the corresponding instance

Common ones are

• this.$el gets the dom of the element corresponding to el
• this.$data gets the instance of the data part