- 组件高级用法
递归组件
组件在它的模板内可以递归地调用自己,只要给组件设置name的选项就可以了。设置name后,在组件模板内就可以递归使用了,不过需要注意的是,必须给一个条件来限制递归数量,否则会抛出错误:max stack size exceeded。
<div id="app">
<child-component :count="1"></child-component>
</div>
<script>
Vue.component('child-component', {
name: 'child-component',
props: {
count: {
type: Number,
default: 1
}
},
template: '<div class="child"> \
<child-component :count="count+1" v-if="count < 3"> \
</child-component> \
</div>'
})
var app = new Vue({
el: '#app'
})
</script>
内联模板
在自定义组件中添加inline-template,组件就会把其内容当做template模板。
在父组件中声明的数据message和子组件中声明的数据msg,两个都可以渲染(如果同名,优先使用子组件的数据)。这反而是内联模板的缺点,就是作用域比较难理解,如果不是非常特殊的场景,建议不要轻易使用内联模板。
<div id="app">
<child-component inline-template :message="messages">
<div>
<h2>在父组件中定义子组件的模板</h2>
<p>{{ message }}</p>
<p>{{ msg }}</p>
</div>
</child-component>
</div>
<script>
Vue.component('child-component', {
props: ['message'],
data: function() {
return {
msg: '在子组件声明的数据'
}
}
});
var app = new Vue({
el: '#app',
data: {
messages: '在父组件声明的数据'
}
})
</script>
动态组件
Vue.js提供了一个特殊的元素<component>用来动态地挂载不同的组件,使用is特性来选择要挂载的组件。
<div id="app">
<component :is="currentView"></component>
<button @click="handleChangeView('A')">切换到A</button>
<button @click="handleChangeView('B')">切换到B</button>
<button @click="handleChangeView('C')">切换到C</button>
</div>
<script>
var app = new Vue({
el: '#app',
components: {
comA: {
template: '<div>组件A</div>'
},
comB: {
template: '<div>组件B</div>'
},
comC: {
template: '<div>组件C</div>'
},
},
data: {
currentView: 'comA'
},
methods: {
handleChangeView: function (component) {
this.currentView = 'com' + component;
}
}
})
</script>
动态地改变currentView的值就可以动态挂载组件了。也可以直接绑定在组件对象上。
<div id="app">
<component :is="addComp"></component>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
addComp: 'coma'
},
components: {
coma: {
template: '<div>动态挂载组件</div>'
}
}
})
</script>