Vue 动态组件：＜component＞ ，v-bind:is 以及 ＜keep-alive＞

假定App.vue有两个子组件，两个按钮，点击对应的按钮，显示对应的组件，一次只能显示一个组件：

要实现这个功能，需要加响应按钮 click 事件的方法 setSelectedComponent()，然后template加若干v-if，有多少个组件类似的code 就写多少次，此方法相对繁琐：

<active-goals v-if="selectedComponent==='active-goals'"></active-goals>
<manage-goals v-if="selectedComponent==='manage-goals'"></manage-goals>

为了解决类似的问题，Vue 提供了元素 <component> 和 is 属性，使用<componet>组件可以实现相同的功能，但是代码更少。
然后假定 ManageGoals 组件有 input 元素，输入了数据，但是切换到ActiveGoals后再切换回来，会发现原先输入的数据不见了。这是因为，切换组件时，旧的组件被移除销毁，切换回来，添加的是一个全新的组件，为了使旧的组件不被完全删除，保存状态信息，也就是使旧的组件一直活着，可以使用 Vue 提供的另一个 wrapper 组件 <keep-alive> ，用这个组件包装要需要使其活着的动态组件，代码如下：

<template>
  <div>
    <button @click="setSelectedComponent('active-goals')">Active Goals</button>
    <button @click="setSelectedComponent('manage-goals')">Manage Goals</button>
    <keep-alive>
        <component :is="selectedComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import TheHeader from './components/TheHeader.vue';
import ManageGoals from "./components/ManageGoals.vue";
import ActiveGoals from "./components/ActiveGoals.vue";

export default {
  components: {
    ActiveGoals,
    ManageGoals,
  },
  data() {
    return {
      selectedComponent:"active-goals",
    };
  },
  methods: {
    setSelectedComponent(cmp) {
      this.selectedComponent = cmp;
    }
  }
};
</script>