下面看下vue component动态组件（详情看vue.js官网动态组件）
动态组件
通过component标签 的is属性来进行组件的切换
is的属性值决定要显示的组件，所以将is的属性值设置为data中的值，以便于动态变化
1 2 3 4 5 6 7 | <template>
<div class="app">
<component :is="组件名称">
</component>
</div>
</template>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html>
<html js string">"en">
<head>
<meta charset="UTF-8">
<title>动态组件</title>
<script src="bower_components/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div js string">"box">
<input type="button"@click="a='aaa'"value="aaa组件">
<input type="button"@click="a='bbb'"value="bbb组件">
<component :is="a"></component> <!-- 动态组件-->
</div>
<script>
varvm=newVue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
template:'<h2>我是aaa组件</h2>'
},
'bbb':{
template:'<h2>我是bbb组件</h2>'
}
}
});
</script>
</body>
</html>
|