Vue-动态组件

1、component组件

目标: 多个组件使用同一个挂载点，并可以动态切换，这就是动态组件

<template>
  <div>
    <button @click="comName = 'UserName'">账号密码填写</button>
    <button @click="comName = 'UserInfo'">个人信息填写</button>

    <p>下面显示注册组件:</p>
    <div style="border: 1px solid red">
      <!-- vue内置的组件component, 可以动态显示组件 -->
      <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import UserName from "./UserName";
import UserInfo from "./UserInfo";
export default {
  data() {
    return {
      comName: "UserName",
    };
  },
  components: {
    UserName,
    UserInfo,
  },
};
</script>

注意:

●is只能是动态属性=》:is="组件注册后的标签名字符串或data变量"

●不能直接拿注册标签名赋值使用

2、keep-alive组件 

组件切换会导致组件被频繁销毁和重新创建, 性能不高。

使用Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁。

补充生命周期:

        ●activated - 激活

        ●deactivated - 失去激活状态

<keep-alive>
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>

 

keep-alive组件-指定缓存:

在keep-alive标签里加include属性即可。

<keep-alive include="name1,name2">
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>