Demo 通過點(diǎn)擊button，實(shí)現(xiàn)兩個(gè)組件的切換，除了使用v-if，還可使用:is 動(dòng)態(tài)組件來完成

我覺得他可以用在根據(jù)不同的角色展示不同組件上使用

通過:is屬性綁定data中的type,type為一個(gè)組件的name,這樣，進(jìn)入頁面就會(huì)默認(rèn)展示一個(gè)組件，通過點(diǎn)擊改動(dòng)data中type中的name,實(shí)現(xiàn)組件切換

<div id="app"><component :is="type"></component> // vue定義的標(biāo)簽<button @click="handleClick">切換</button> </div> <script>Vue.component('containerOne', {template: `<div>組件1</div>`,})Vue.component('containerTwo', {template: `<div>組件2</div>`,})var vm = new Vue({el: '#app',data: {type: 'containerOne'},methods: {handleClick() {this.type = this.type == 'containerOne' ? 'containerTwo' : 'containerOne'}}}) </script> 復(fù)制代碼

轉(zhuǎn)載于:https://juejin.im/post/5cd04374f265da039d3298d8

總結(jié)

以上是生活随笔為你收集整理的[Vue]动态组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。