component 动态组件

动态组件的简单用法

<template>
  <div>
    <h1>动态组件</h1>
    <!-- 通过点击事件改变变量的值 -->
    <button @click="Com = 'Bar'">大儿子酷酷</button>
    <button @click="Com = 'Foo'">小儿子帅帅</button>
    <!-- 通过 :is="" 来改变组件 -->
    <component :is="Com"></component>
    -----
    <keep-alive :include="['Bar','Foo']"> // 两种写法
    <!-- <keep-alive include="Bar,Foo"> // 二种 -->
    <!-- 通过 :is="" 来改变组件 -->
      <component :is="Com"></component>
    </keep-alive>
  </div>
</template>

<script>
// 引入创建的两个组件
import Bar from './components/bar.vue'
import Foo from './components/foo.vue'
export default {
  name: 'DemoApp',
  // 注册组件
  components : {
    Bar,
    Foo
  },
  data() {
    return {
      // 定义一个变量通过点击事件随心改变
      Com: 'Bar'
    };
  }
};
</script>