Advanced use of vue components

This time I will bring you the advanced use of vue components. What are the precautions for the advanced use of vue components. The following is a practical case, let's take a look.

1. Recursive component

#The component can call itself recursively in its template, just set the name option to the component. .

The example is as follows:

  <p id="app19">
   <my-component19 :count="1"></my-component19>
  </p>
Vue.component('my-component19',{
 name: 'my-component19', //其实当你利用 Vue.component 全局注册了一个组件，全局的ID会被自动设置为组件的name。
 props: {
  count: {
   type: Number,
   default: 1
  }
 },
 template: '<p><my-component19 :count="count+1" v-if="count<3"></my-component19></p>'
});
var app19 = new Vue({
 el: '#app19'
});

The rendering result is:

 <p id="app19">
  <p>
   <p>
    <p><!----></p>
   </p>
  </p>
 </p>

After setting the name, it can be used recursively in the component template. However, it should be noted that a Condition to limit the number of recursions, otherwise an error will be thrown: max stack size exceeded .

Recursive use of components can be used to develop some independent components with unknown hierarchical relationships, such as cascading selectors and tree controls, etc.

2. Inline template

The template of the component is generally defined in the template option. Vue provides an inline template. Function, when using a component, use the inline-template attribute for the component tag, and the component will treat its content as a template instead of distributing it as content, which makes the template more flexible.

Examples are as follows:       

<p id="app20">
   <my-component20 inline-template>
    <p>
     <h3>在父组件中定义子组件的模板</h3>
     <p>{{msg}}</p>
    </p>
   </my-component20>
  </p>
Vue.component('my-component20',{
 data: function(){
  return {
   msg: '在子组件声明的数据'
  }
 }
});
var app20 = new Vue({
 el: '#app20'
});

3. Dynamic component

Vue.js provides a special element Used to dynamically mount different components, use the is attribute to select the component to be mounted.

Examples are as follows: ​​​​, it's time to consider performance issues, because loading all components at the beginning is unnecessary overhead.

Fortunately, Vue.js allows you to define a component as a factory function and dynamically parse the component. Vue. Only triggers the factory function when the component needs to be rendered, and caches the results for subsequent re-rendering.

<p id="app21">
   <component :is="currentView"></component>
   <button @click="changeView(&#39;A&#39;)">切换到A</button>
   <button @click="changeView(&#39;B&#39;)">切换到B</button>
   <button @click="changeView(&#39;C&#39;)">切换到C</button>
  </p>
var app21 = new Vue({
 el: '#app21',
 data: {
  currentView: 'comA'
 },
 methods: {
  changeView: function(data){
   this.currentView = 'com'+ data　　//动态地改变currentView的值就可以动态挂载组件了。
  }
 },
 components: {
  comA: {
   template: '<p>组件A</p>'
  },
  comB: {
   template: '<p>组件B</p>'
  },
  comC: {
   template: '<p>组件C</p>'
  }
 }
});

The factory function receives a resolve callback and is called when receiving the component definition downloaded from the server. You can also call reject(reason) to indicate a loading failure. The setTimeout here is just to demonstrate asynchronousness. The specific download logic can be decided by yourself. For example, write the component configuration as a object

configuration, request it through Ajax, and then call resolve to pass in the configuration options.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to develop a custom library

How to use JS to merge multiple arrays for recalculation

The above is the detailed content of Advanced use of vue components. For more information, please follow other related articles on the PHP Chinese website!