黑龙江汽车网

黑龙江汽车网 > 企业

Vue单页面的动态组件

2020-03-29 10:15:17 来源: 阅读:-
<template id="my-A">
<div>
<p >{{title}}</p>
</div>
</template>
<template id="my-B">
<div>
<p >B组件</p>
</div>
</template>
<template id="my-C">
<div>
<p >C组件</p>
</div>
</template>
<div id="app">
<!-- 动态组件 一-->
<button @click="flag= 'a'">a组件</button>
<button @click="flag= 'b'">b组件</button>
<my-a v-if="flag=='a'" :title=" 'aaaa组件' "></my-a>
<my-a v-if="flag=='b'" :title=" 'bbbb组件' "></my-a>
<hr>
<!-- 动态组件 二 判断的是组件的名称-->
<button @click="flag2= 'my-b'">b组件</button>
<button @click="flag2= 'my-c'">c组件</button>
<component :is="flag2"></component>
</div>

<script>
new Vue({
el:'#app',
data:{
flag:'a',
flag2:'my-b'
},
components:{ //组件
'my-a':{
template:'#my-A',
props:['title']
},
'my-b':{
template:'#my-B',
},
'my-c':{
template:'#my-C',
}
}
});
</script>

推荐阅读:苹果7跟苹果8哪个好

相关阅读

黑龙江汽车网版权与免责声明:

一、凡本站中注明“来源:黑龙江汽车网”的所有文字、图片和音视频,版权均属黑龙江汽车网所有,转载时必须注明“来源:黑龙江汽车网”,并附上原文链接。

二、凡来源非黑龙江汽车网的(作品)只代表本网传播该消息,并不代表赞同其观点。

如因作品内容、版权和其它问题需要同本网联系的,请在见网后30日内进行联系。