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

44次阅读

共计 548 个字符，预计需要花费 2 分钟才能阅读完成。

动静渲染不同的组件

<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')