1. Recursive components
Components can call themselves recursively within their templates, just set the name option for the component.
Examples are as follows:
<div >
<my-component19 :count="1"></my-component19>
</div>
('my-component19',{
name: 'my-component19', //In fact, when you use global registration of a component, the global ID will be automatically set to the component's name. props: {
count: {
type: Number,
default: 1
}
},
template: '<div><my-component19 :count="count+1" v-if="count<3"></my-component19></div>'
});
var app19 = new Vue({
el: '#app19'
});
The rendering result is:
<div >
<div>
<div>
<div><!----></div>
</div>
</div>
</div>
After setting name, it can be used recursively within the component template. However, it should be noted that a condition must be given to limit the recursive number, otherwise an error will be thrown: max stack size exceeded.
Component recursive use can be used to develop some independent components with unknown hierarchical relationships, such as cascade selectors and tree controls.
2. Inline templates
Component templates are generally defined within the template option. Vue provides the function of an inline template. When using components, use the inline-template feature for component labels. 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:
<div >
<my-component20 inline-template>
<div>
<h3>Define templates for child components in parent component</h3>
<p>{{msg}}</p>
</div>
</my-component20>
</div>
('my-component20',{
data: function(){
return {
msg: 'Data declared in child components'
}
}
});
var app20 = new Vue({
el: '#app20'
});
3. Dynamic components
A special element <component> is provided to dynamically mount different components, and use the is feature to select the components to be mounted.
Examples are as follows:
<div >
<component :is="currentView"></component>
<button @click="changeView('A')">Switch toA</button>
<button @click="changeView('B')">Switch toB</button>
<button @click="changeView('C')">Switch toC</button>
</div>
var app21 = new Vue({
el: '#app21',
data: {
currentView: 'comA'
},
methods: {
changeView: function(data){
= 'com'+ data// Dynamically change the currentView value to mount the component dynamically. }
},
components: {
comA: {
template: '<div>Component A</div>'
},
comB: {
template: '<div>Component B</div>'
},
comC: {
template: '<div>Component C</div>'
}
}
});
4. Asynchronous components
When your project is large enough and you use enough components, it's time to consider performance issues, because loading all components at the beginning is unnecessary overhead.
Fortunately, it allows the component to be defined as a factory function to dynamically parse the component. Vue. Only triggers the factory function when the component needs to be rendered, and caches the result for later re-rendering.
<div >
<my-component22></my-component22>
</div>
('my-component22',function(resolve, reject){
(function(){
resolve({
template: '<div>I'm rendering asynchronously</div>'
})
},2000)
});
var app22 = new Vue({
el: '#app22'
});
The factory function receives a resolve callback, called when a component definition downloaded from the server is received. You can also call reject( reason) to indicate that loading failed.
Here setTimeout is just to demonstrate asynchronousness. The specific download logic can be decided by yourself, such as writing the component configuration into an object configuration, requesting it through Ajax, and then calling resolve to pass in the configuration option.
Summarize
The above is a detailed explanation of the advanced usage examples of vue components introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!