大家好，欢迎来到IT知识分享网。
动态组件
所谓的动态组件就是在不同的组件之间进行动态切换。
Vue提供了一个特殊的元素<component>用来动态的挂载不同的组件 使用is 属性来选择要挂载的组件。
<component v-bind:is="mytemp"></component>
mytemp可以是已经注册的组件的名字，也可以是一个组件的选项对象、
1.当mytemp是注册组件时
<template>、
<div id="app">
<button @click="changeView('A')">切换到组件A</button>
<button @click="changeView('B')">切换到组件B</button>
<button @click="changeView('C')">切换到组件C</button>
<component :is="currentView"></component>
</div>
</template>
<script>
let vm = new Vue({
el: "#app",
data: {
currentView: 'comA'
},
components: {
comA: {
template: '<div>组件A</div>'
},
comB: {
template: '<div>组件B</div>'
},
comC: {
template: '<div>组件C</div>'
}
},
methods: {
changeView(component) {
this.currentView = 'com' + component;
}
}
});
</script>
2.当mytemp是组件对象时
<template>
<div id="app">
<component :is="currentView"></component>
</div>
</template>
<script>
let Home = {
template:'<div>这是一个组件</div>'
}
let vm = new Vue({
el: "#app",
data: {
currentView: Home
}
});
</script>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/32051.html
