前面的话
前面介绍的提到的内联模板也是属于组件高级用法,在实际业务中不是很常用,但是在独立组件开发时可能会用到。
递归组件
组件在它的模板内可以递归地调用子,只要给组件设置name选项就可以了。
<div id="app1">
<parent-component></parent-component>
</div>
<script>
var childNode = {
name: "child-component",
props:{
count:{
type: Number,
default: 1
}
},
template: `
<div class="child">
<child-component v-if="count < 3" :count="count + 1"></child-component>
</div>
`
}
var parentNode = {
template: `
<div class="parent">
<child-component :count="1">
<p>分发内容</p>
</child-component>
</div>`,
components: {
"child-component": childNode
}
}
var app1 = new Vue({
el: '#app1',
components: {
"parent-component": parentNode
}
})
</script>
动态组件
Vue.js提供了一个特殊的元素用来动态地挂载不同的组件,使用is特性来选择要挂载的组件。
<div id="app2">
<component :is="currentView"></component>
<button @click="handleChangeView()">切换页面</button>
</div>
<script>
var app2 = new Vue({
el: '#app2',
components: {
comA: {
template: `
<div>组件A</div>
`
},
comB: {
template: `
<div>组件B</div>
`
},
comC: {
template:`
<div>组件C</div>
`
}
},
data: {
index: 0,
arr: ['comA','comB','comC'],
},
computed: {
currentView () {
return this.arr[this.index]
}
},
methods: {
handleChangeView() {
this.index = (++this.index) % 3;
}
}
})
</script>
异步组件
当工程足够大时,使用的组件足够多时,是时候考虑下性能的问题了,因为一开始把所有的组件都加载是没有必要的一笔开销。 Vue.js允许将组件定义为一个工厂函数,动态的解析组件。Vue.js只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。
<div id="app3">
<child-component></child-component>
</div>
<script>
Vue.component('child-component',function (resolve, reject) {
window.setTimeout(() => {
resolve({
template: `<div>我是异步渲染的</div>`
})
}, 2000);
});
var app3 = new Vue({
el: '#app3'
})
</script>
工厂函数接受一个resolve回调,在收到从服务器下载的组件定义时调用。也可以调用reject(reason)指示加载失败。这里setTimeout只是为了演示异步,具体的下载逻辑可以自己决定。
关于异步组件后面还会单独的详细介绍。