Componentization of Vue

Componentization is Vue Important idea in JS: it provides an abstraction, so that we can develop independent reusable small components to construct our applications. Any application will be abstracted into a component tree.

Application of componentization: with the idea of componentization, we should make full use of it in future development and split the page into small reusable components as much as possible, so that our code is more convenient to organize and manage, and has strong scalability (therefore, component development is often inseparable from the application of slot tags)

Usually, we split a div that contains a function module or a function bar div that needs to be displayed on multiple pages into components.

Basic steps for registering components

The use of components is divided into three steps: 1 Create a component constructor; 2. Register components; 3. Use components

The cases are as follows:

<div id = "app">
<!--  3.Use components-->
  <my-comp/>
</div>

<script src = "../JS/vue.js"></script>
<script>
  //1. Create a component constructor
  const myComponent = Vue.extend({
    template:  `
       <div>
        <h2>I am a component</h2>
       </div>
    `
  });
  //2. Register the component and define the name of the component label
  Vue.component('my-comp', myComponent);
  let app = new Vue({
    el: "#app",
    data:{
      name: '',
    },
  })

When creating a component constructor, we use the template string '...', It can also be called template literal, which is a string literal that allows embedded expressions. You can use multiline strings and string interpolation. Because we need to customize the component style, we don't create it On the premise of vue file, concatenate multiple lines of text in a more elegant and intuitive way, and it is more recommended to use template string.

After the component is created, it can be referenced anywhere under the corresponding mounted instance in the file (other files in the current folder cannot be rendered successfully if they are not registered)

The results are as follows:

 

Steps for registering components

1.Vue.extend(): 

        1). Call Vue Extend () creates a component construct;

        2). Usually, when creating a component constructor, the template passed in represents the template of our custom component;

        3). Compiling pre displayed html code needs to be written into the template

        4). In fact, this is written in vue2 X documents are almost invisible (most of them use scaffolding to create. Vue files in component and then import). Generally, syntax sugar is used directly. Nevertheless, the above methods are the basis for us to understand the construction of Vue components.

2.Vue.component():

        1). Call Vue Coponent () is to register the component constructor as a component and label it with a component name;

        2). Two parameters need to be passed: 1 Label name of registered component, 2 Component constructor

3. The component must be attached to a Vue instance, otherwise it will not take effect. See the following:

<div id = "app">
<!--  Use components-->
  <my-comp/>
</div>
<my-comp/>

Because the registered component my comp is not mounted in the div with id app, the content in my comp is not successfully rendered.

Global and local components

For the global component writing method, see creating a registered component method. The global component must be written before the Vue instance is created, so that it can take effect under the root element. Using Vue Component() can be used in multiple Vue instances. (Vue.funcxxx() methods are mostly global methods). See the following examples:

<div id = "app">
  <h2>app</h2>
<!--  Use components-->
  <my-comp1/>
</div>
<div id="app1">
  <h2>app1</h2>
  <my-comp1/>
</div>

<script src = "../JS/vue.js"></script>
<script>
  //1. Create a component constructor
  const myComponent1 = Vue.extend({
    template:  `
       <div>
        <h2>I am a global component</h2>
       </div>
    `
  });
/2.Register the component and define the name of the component label
  Vue.component('my-comp1', myComponent1);
  let app = new Vue({
    el: "#app",
    data:{
      name: '',
    },
  });
  let app1 = new Vue({
    el: "#app1",
    data:{
      name: '',
    },
  })
</script>

The results are as follows:

 

Local components can only be successfully rendered under vue instances under registration. The case is as follows:

<div id = "app">
  <h2>app</h2>
<!--  Use components-->
  <my-comp2/>
</div>
<div id="app1">
  <h2>app1</h2>
  <my-comp2/>
</div>

<script src = "../JS/vue.js"></script>
<script>
  //1. Create a component constructor
  const myComponent2 = Vue.extend({
    template:  `
       <div>
        <h2>I am a local component</h2>
       </div>
    `
  });
  //2. Register the component and define the name of the component label
  let app = new Vue({
    el: "#app",
    data:{
      name: '',
    },
    components: {
      'my-comp2': myComponent2
    }
  });
  let app1 = new Vue({
    el: "#app1",
    data:{
      name: '',
    },
  })
</script>

The results are shown below:

However, if both global components and local components appear in the mounted div, and the local components have been registered under the corresponding instance, only the global component rendering results will be retained on the page (the principle is not clear at the moment)