关于vue.js:vue-is-动态组件

动静渲染不同的组件

<component v-bind:is="currentTabComponent" class="tab"></component>

const app = Vue.createApp({data() {
    return {
      currentTab: 'Home',
      tabs: ['Home', 'Posts', 'Archive']
    }
  },
  computed: {currentTabComponent() {return 'tab-' + this.currentTab.toLowerCase()
    }
  }
})

app.component('tab-home', {template: `<div class="demo-tab">Home component</div>`})
app.component('tab-posts', {template: `<div class="demo-tab">Posts component</div>`})
app.component('tab-archive', {template: `<div class="demo-tab">Archive component</div>`})

app.mount('#dynamic-component-demo')

扩大 html 标签的限度

vue.js 动静组件 is 应用