Vue之组件高级用法
2020-02-06 本文已影响0人
wenmingxing
1. 递归组件
组件在它的模板内可以递归地调用自己，只要给组件设置name选项即可，并且必须给一个条件来限制递归数量，否则会抛出错误。
<body>
<div id="app">
<child-component :count="1"></child-component>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
Vue.component('child-component',{
name: 'child-component', //设置name
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>
</body>
组件递归使用可以用来开发一些具有未知层级关系的独立组件，比如级联选择器和树形控件等。
2. 动态组件
Vue提供了一个特殊的元素<component>用来挂载不同的组件，使用is特性来选择要挂载的组件：
<!-- 动态组件 -->
<body>
<div id="app">
<component :is="currentView"></component>
<button @click="handleChangeView('A')">Change to A</button>
<button @click="handleChangeView('B')">Change to B</button>
<button @click="handleChangeView('C')">Change to C</button>
</div>
<script src = "https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
components: {
comA: {
template: '<div>componentA</div>'
},
comB: {
template: '<div>componentB</div>'
},
comC: {
template: '<div>componentC</div>'
}
},
data: {
currentView: 'comA'
},
methods: {
handleChangeView: function(component) {
this.currentView = 'com' + component;
}
}
})
</script>
</body>
执行结果
3. 内联模板 & 异步组件
略
参考
- 《Vue.js 实战》
