Detailed explanation of component usage examples of Vue learning

Time:2020-10-26

This paper introduces the component usage of Vue learning. For your reference, the details are as follows:

The modular and reusable code blocks in Vue subdivide the page into functional components, and the components can be nested. Components are divided into global components and local components. Local components are registered in an instance and can only be applied to the instance.

1. How to use components:

//1. Creating a component constructor
    let overallDiv=Vue.extend({
      template:`
        <div>
          <p>This is a global component Div</p>
        </div>
      `
    });
  //2. Register global components
    Vue.component('overall-div',overallDiv);
  //3. Instantiation, components can only be used within the instantiated div, and cannot be used directly in the page
    let vue=new Vue({
      el:'#app',
      data:{},
    //Register the local component in the instance, and its creation and registration can be written in one step
    components:{
      'local-div':{
        template:
          ` <div>
              <p>This is a local component Div</p>
           </div>
          `
      }
    },
    methods:{
    }
    });

Use components in div instantiated by HTML page:


  <div>
    <local-div></local-div>
    <overall-div></overall-div>
  </div>

be careful: some HTML tags have restrictions on the tags that can be put into them. In this case, you need to convert the component into the component you want to put through the is attribute. For example, only < li > can be placed under the < UL > tag. In this case, you can use < Li is = “my component” >, which is equivalent to placing the < My component > tag.

2. Template

In addition to creating templates in JS, you can also use the template in the page to create a template. Note that the template in the page can only have one root element. If there are multiple elements that need to be included in a div, for example, the template in the page body:

<template>
    <div>
      <p>This is the template in the page</p>
    </div>
  </template>

Register the template through ID number in JS.


  Vue.component('my-tmp',{
    template:'#myTmp'
  });

3. Data of component

Data used in components must be returned in the form of a function. If it exists in the form of a property value, all components will share a property value. If one of them is changed, all components will be affected. For example, a component that counts the number of hits:

<template>
    <div>
      The < button @ Click = "count + +" > button has been hit {{count}} times < / button >
    </div>
  </template>
Vue.component('my-btn',{
    template:'#myBtn',
    Data() {// defines the data used by the component in the form of function return
      return {
        count:0
      };
    }
  });   
  <div>
    <my-btn></my-btn>
    <my-btn></my-btn>
  </div>

Click two buttons respectively on the page, and the count of the two button components will be counted respectively, without interference with each other

4. Parent child component

If a child component is created first, and then registered in the parent component, the child component can be used in the template of the parent component, and then the parent component can be registered. In this way, the parent component containing the child component can be called externally, and the parent component interface can be used externally without knowing the implementation of the internal child component

Note that a child component cannot be used externally, because it is only registered within the parent component and cannot be seen externally

let child1=Vue.extend({
    Template: '< div > this is the subcomponent 1 < / div >`
  });
  let child2=Vue.extend({
    Template: '< div > this is the subcomponent 2 < / div >`
  });
  Vue.component('parent',{
    components:{
      'c1':child1,
      'c2':child2
    },
    //Call a child component within a parent component
    Template: '< div > parent component < C1 > < / C1 > < C2 > < / C2 > < / div >`
  });
  <div>
    <parent></parent>
  </div>

The results are as follows

5. Slot

Like containers in life, slots allow you to insert tags, components, and so on into them, while providing a box to wrap them outside. Slot is divided into anonymous slot and real name slot. Anonymous slot can insert any type of content into it.

The real name slot can insert the content into the specified slot, just like the motherboard of a computer. The CPU and memory module have their own corresponding slots. The real name slot specifies the name of the slot through the name attribute in the template. When using, specify the corresponding name through the slot attribute of the tag, and then insert the label into the specified slot.

Anonymous slot

<! -- anonymous slot -- >
  <template>
    <div style="width: 20%;">
      <h3>This is the head of the slot</h3>
      < slot > slot default display content < / slot >
      <hr/>
      <p>Slot tail</p>
    </div>
  </template>
  let vue2=new Vue({
    el:'#app2',
    data:{
    },
    components:{
     //Bind anonymous slot
     'anonymous-slot':{
       template:'#anonymousDiv'
     },
     //Bind real name slot
     'realname-slot':{
       template:'#realnameDiv'
     }
    }
  });

Insert the contents into the CPU slot:

<div>
    <anonymous-slot>
      <p>Insert a piece of text into the slot</p>
    </anonymous-slot>
  </div>

When there is no content in the slot: insert a text:

Real name slot

<template>
<div>
  <h3>Real name slot head</h3>
  < slot name = "CPU" > this is the CPU slot < / slot >
  This is a memory slot
  < slot name = "harddisk" > this is the hard disk slot < / slot >
</div>
</template>
<realname-slot>
  <p slot="cpu">Intel Core i5</p>
</realname-slot>

Results: the CPU was placed in the specified slot, while other slots were not affected

I hope this article will be helpful to you vue.js Programming helps.