vue入门学习—动态组件

动态组件

官方文档
在一个多标签的界面中使用 is 特性来切换不同的组件：
<component v-bind:is="currentTabComponent"></component>
以下是代码

<template>
  <div id="app" v-cloak>
    <button @click="handleChangeView('tplA')">A</button>
    <button @click="handleChangeView('tplB')">B</button>
    <button @click="handleChangeView('Section1')">C</button>
    <component :is="currentView"></component>
  </div>
</template>

<script>
import MyComponent from './components/MyComponent.vue'
import Section1 from './components/section1.vue'
export default {
  name: 'App',
  data: function () {
    return {
      age: 18,
      currentView: MyComponent
    }
  },
  components: {
    tplA: {
      template: `
          <div>组件A</div>
      `
    },
    tplB: {
      template: `
          <div>组件B</div>
      `
    },
    Section1
  },
  methods: {
    handleChangeView: function (component) {
      this.currentView = component
    }
  }
}
</script>

转载于:https://www.cnblogs.com/muqiao/p/9585848.html