vue动态组件

vue中实现动态组件的引入使用

• vue 中实现动态组件引入可以利用 component 如：

   <component  :is="currentView[active]"></component>
  

• 在某些 业务场景中，我们需要使用多个组件根据不同的状态显示不同的组件时， component 就可以为我们实现这个需求，如：

  <template>
    <div id="app">
        <component  :is="currentView[active]"></component> // 动态绑定放置组件的对象，根据active 动态改变组件的显示
  ​
        <button @click="handleChange">切换</button>
    </div>
  </template>
  ​
  <script>
  import Demo1 from '@/components/Demo1.vue';
  import Demo2 from '@/components/Demo2.vue';
  ​
  export default {
    name: 'App',
    components: { // 引入的组件需要在 components 中注册
      Demo1,
      Demo2,
    },
    data() {
      return {
         currentView: { // 在这里我们定义一个放置所有的组件数据，根据键就可以取出对应的组件
          '0': 'Demo1', // 此处填写的是引入和注册的同名，注意检查没有书写错误或多出空格之类
          '1': 'Demo2',
          
        },
        active: 0, // 可以动态改变索引就可以切换不同组件
      }
    },
  

  第一次记录，如有不对，可以提出一起学习。