Vue inserts content into components

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

Keywords: Javascript Vue Attribute

Added by idweb on Thu, 02 Apr 2020 01:37:00 +0300