Demo 通過點擊button，實現兩個組件的切換，除了使用v-if，還可使用:is 動態組件來完成

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

通過:is屬性綁定data中的type,type為一個組件的name,這樣，進入頁面就會默認展示一個組件，通過點擊改動data中type中的name,實現組件切換

<div id="app"><component :is="type"></component> // vue定義的標簽<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> 復制代碼

轉載于:https://juejin.im/post/5cd04374f265da039d3298d8

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。