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>
posted @ 2018-09-05 14:20  沐荍  阅读(176)  评论(0编辑  收藏  举报