vue-动态组件（:is=“组件名“）

通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换不同的组件。根据 v-bind:is="组件名" 中的组件名去自动匹配组件 也是一个组件对象，如果匹配不到则不显示。

也可以用做不改变路由的情况下切换不同的页面/组件。

改变挂载的组件，只需要修改is指令的值即可。不会保存组件的状态（即重新加载这个组件）

father.vue

<template>
  <div>
    <h2>动态组件</h2>
    <button type="button" @click="viewDyn1">组件1</button>
    <button type="button" @click="viewDyn2">组件2</button>

    <component :is="viewCom"></component>

  </div>
</template>
<script>
import dyn1 from "./dyn1";
import dyn2 from "./dyn2";
export default {
  components: {
    dyn1,
    dyn2
  },
  data() {
    return {
      viewCom: "dyn1"
    };
  },
  methods: {
    viewDyn1() {
      // 更改:is的属性值
      this.viewCom = "dyn1";
    },
    viewDyn2() {
      this.viewCom = "dyn2";
      console.log(this.$children)
    }
  }
};
</script>

dyn1.vue

<template>
  <div>{{msg}}</div>
</template>
<script>
export default {
  name: "dyn1",
  data() {
    return {
      msg: "组件1"
    };
  }
};
</script>

dyn2.vue

<template>
  <div>{{msg}}</div>
</template>
<script>
export default {
  name: "dyn2",
  data() {
    return {
      msg: "组件2"
    };
  }
};
</script>

#keep-alive   缓存

<keep-alive> 包裹动态组件时，会想保持这些组件的状态，而不是销毁它们。和 <transition>相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

动态切换掉的组件（非当前显示的组件）是被移除掉了，如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：

    <keep-alive>
      <component :is="viewCom"></component>
    </keep-alive>
 

说明：

初始情况下，vm.$children属性中只有一个元素（dyn1组件），

点击按钮切换后，vm.$children属性中有两个元素（两个子组件都保留在内存中），

之后无论如何切换，将一直保持有两个元素。

 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行，只有使用<keep-alive>缓存子组件才存在这两个钩子函数。

可以延迟执行当前的组件。

具体用法来说，activate是和template、data等属性平级的一个属性，形式是一个函数，函数里默认有一个参数，而这个参数是一个函数，执行这个函数时，才会切换组件。

dyn2.vue

<template>
  <div>{{msg}} --- {{hello}}</div>
</template>
<script>
export default {
  name: "dyn2",
  data() {
    return {
      msg: "组件2",
      hello: ""
    };
  },
  activated(done) {
    //执行这个参数时，才会切换组件
    console.log("组件被添加");
    // var self = this;
    var startTime = new Date().getTime(); // get the current time
    //两秒后执行
    while (new Date().getTime() < startTime + 2000) {
      this.hello = "我是延迟后的内容";
    }
  },
  deactivated() {
      console.log("组件被移除");
      this.$emit('passData', "组件被移除");
  }
};
</script>

可用如上所示代码添加添加这2个生命期钩子函数，然后通过自定义事件的方式，向外发送事件通知。

father.vue

<template>
  <div>
    <h2>动态组件</h2>
    <button type="button" @click="viewDyn1">组件1</button>
    <button type="button" @click="viewDyn2">组件2</button>
    <keep-alive :include="/dyn2/">
      <component :is="viewCom" @passData="acceptData"></component>
    </keep-alive>
  </div>
</template>
<script>
import dyn1 from "./dyn1";
import dyn2 from "./dyn2";
export default {
  components: {
    dyn1,
    dyn2
  },
  data() {
    return {
      viewCom: "dyn1"
    };
  },
  methods: {
    viewDyn1() {
      this.viewCom = "dyn1";
    },
    viewDyn2() {
      this.viewCom = "dyn2"
      console.log(this.$children);
    },
    acceptData(data) {
        console.log('移除dyn2接收传过来的数据：'+data)
    }
  }
};
</script>

组件有条件地缓存【include和exclude】

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。（组件中name属性的值）
• max - 数字。最多可以缓存多少组件实例。

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称（父组件 components 选项的键值）。匿名组件不能被匹配

具体示例如下：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 v-bind) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
<!-- Array (use v-bind) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

例：

father.vue

    <keep-alive :include="/dyn2/">
      <component :is="viewCom"></component>
    </keep-alive>