vue的动态组件

动态组件

含义

动态切换组件的显示和隐藏。

vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染。可以把其理解为占位符。

要展示哪个组件，就指定要展示的名称。

<template>
<div class="app-container">
  <!-- 3.点击按钮，动态切换组件的名称 -->
  <button @click="comName='Left'">show Left</button>
  <button @click="comName='Right'">show Right</button>
​
  <div class="box">
    //不直接使用标签
    <!-- <Left></Left>
<Right></Right> -->
​
    <!-- 2.通过js属性，动态指定要渲染的组件 -->
    <component :is=comName></component>
  </div>
  </div>
</template>
​
<script>
  // 1. 导入需要使用的 .vue 组件
  import Left from '@/components/Left.vue'
  import Right from '@/components/Right.vue'
  export default {
    data() {
      return {
        //1.当前要渲染的组件名称
        comName:'Left'
      }
    },
    // 2. 注册组件
    components: {
      Left,
      Right,
    }
  }
</script>

keep-alive

如上示例，在left变成right之后，假如又回到left，之前第一次left里的数据因为第一次left组件的销毁而消失了。

<keep-alive></keep-alive>vue内置组件，可以把内部的组件进行缓存,而不是销毁组件。

组件被缓存/激活

<keep-alive>
  <component :is=comName></component>
</keep-alive>

keep-alive对应的生命周期函数

• 当组件被缓存时，会自动触发组件的deactivated生命周期函数。

• 当组件被激活时，会自动触发组件的actived生命周期函数。

• 写在组件里，不在App.vue里

• 当组件第一次被创建的时候，既会执行created生命周期，也会触发activated生命周期。

• 但是，当组件被激活的时候，只会触发activated生命周期，不再触发created。

keep-alive的include属性

include属性用来指定，只有名称匹配的组件会被缓存，多个组名之间用 , 分隔;

exclude属性用来排除，谁不被缓存，但是二者不能同时用！

<keep-alive include="Left,Right ">
  <component :is=comName></component>
</keep-alive>

组件注册名称/组件声明的name

1. 组件注册名称（Component Registration Name）是在 Vue 实例中注册组件时使用的名称。它是一个字符串，用于在组件的 components 选项中指定组件的名称。

   组件的注册名称的主要应用场景是：以标签的形式把注册好的组件，渲染和使用到页面结构之中。

2. 组件声明的 name（Component Declaration Name）是组件内部的一个属性，用于指定组件自身的名称。它也是一个字符串，可以在组件的选项中通过 name 属性进行声明。

   主要应用场景：结合<keep-alive>标签实现组件缓存功能。以及在调试工具中看到组件的名称

如果在"声明组件"的时候，没有为组件指定name名称，则组件的默认名称就是"注册时候的名称"，即：

//注册组件
components: {
    Left,
    Right,
    Test
  },

在组件声明的时候提供name属性,此时组件的名字就不是Right而是MyRight，即name的属性值

export default {
  name:"MyRight",
}

这两个名称在不同的上下文中使用，并且具有不同的目的。组件注册名称用于在 Vue 实例中引入和注册组件，而组件声明的 name 则是为组件本身提供一个标识符，用于在开发工具和调试信息中进行识别和显示。

请注意，组件注册名称和组件声明的 name 可以是任意字符串，但最好使用有意义且符合命名规范的名称，以便于代码的可读性和维护性。