大家好,欢迎来到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://yundeesoft.com/32051.html