＜component＞标签的介绍和使用

目录

基本使用：

使用组件对象：

使用动态组件与 keep-alive

keep-alive简单介绍及使用：

属性：

生命周期钩子：

举例：

缓存单个组件：

缓存多个组件（通过路由动态）：

注意事项

:is可以是什么? 

1.HTML标签

2.style样式

---

介绍：

在 Vue.js 中，<component> 是一个特殊的元素，它允许你动态地绑定到一个组件。这意味着你可以根据某些条件或数据动态地渲染不同的组件。

<component> 元素有一个特殊的 is 属性，该属性用于指定要渲染的组件。

基本使用：

简单举个例吧：

其中自己设置的参数setComponent是用来决定 <component> 将渲染哪个组件。

<template>  
  <div>  
    <component :is="setComponent"></component>  
  </div>  
</template>  
  
<script>  
import ComponentA from './ComponentA.vue';  
import ComponentB from './ComponentB.vue';  
  
export default {  
  components: {  
    ComponentA,  
    ComponentB  
  },  
  data() {  
    return {  
      setComponent: 'ComponentA'  
    };  
  },  
  // ... 其他选项  
}  
</script>

但是，直接通过字符串指定组件名可能不是最好的，因为它可能导致组件的查找和解析变得复杂。更好的做法是使用组件对象本身。

使用组件对象：

<template>  
  <div>  
    <component :is="setComponentObject"></component>  
  </div>  
</template>  
  
<script>  
import ComponentA from './ComponentA.vue';  
import ComponentB from './ComponentB.vue';  
  
export default {  
  components: {  
    ComponentA,  
    ComponentB  
  },  
  data() {  
    return {  
      setComponentObject: ComponentA  
    };  
  },  
  // ... 其他选项  
}  
</script>

使用动态组件与 keep-alive

当使用 <component> 动态切换组件时，每次切换都会重新创建和销毁组件实例。如果你希望保留组件的状态或避免重新渲染，可以使用 <keep-alive> 包裹 <component>。

<template>  
  <div>  
    <keep-alive>  
      <component :is="currentComponentObject"></component>  
    </keep-alive>  
  </div>  
</template>  
  
<!-- ... 其他代码与上述示例相同 ... -->

 <keep-alive> 可以帮助你保留组件状态，但请注意它可能会增加内存消耗，因为组件实例不会被销毁。

keep-alive简单介绍及使用：

<keep-alive> 是 Vue.js 中的一个内置组件，它主要用于缓存不活动的组件实例，而不是销毁它们。<keep-alive> 组件本身并没有提供特定的“方法”，但你可以通过其属性以及在被缓存组件中定义的生命周期钩子来控制其行为。

属性：

include：只有匹配的组件会被缓存。

exclude：任何匹配的组件都不会被缓存。

max：数字，用于指定最多可以缓存多少个组件实例。一旦这个数量被超过，最早创建的实例会被销毁。

生命周期钩子：

在被 <keep-alive> 包裹的组件中，可定义两个特殊的生命周期钩子来控制缓存组件的行为：

activated：当组件被激活时调用。

• 在组件第一次渲染后也会被调用，之后每次从缓存中重新激活时也会被调用。

deactivated：当组件被停用时调用。

• 当组件被移除或者替换成其他组件时，这个钩子会被调用。

举例：

• 缓存单个组件：

  <template>  
    <div>  
      <keep-alive>  
        <Component></Component>  
      </keep-alive>  
    </div>  
  </template>

• 缓存多个组件（通过路由动态）：

  <template>  
    <div>  
      <keep-alive :include="includeComponents">  
        <router-view></router-view>  
      </keep-alive>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        includeComponents: ['ComponentA', 'ComponentB']  
      }  
    }  
  }  
  </script>

注意事项

• 当使用 <component> 时，请确保你已经正确地注册了所有可能的组件。
• 使用组件对象而不是字符串名可以提供更清晰和直接的引用。
• 如果你使用字符串来指定组件名，那么这些组件名必须在 Vue 实例的 components 选项中注册，或者作为全局组件注册。

:is可以是什么? 

除了上面几种，还可以下面这些：

1.HTML标签

 为div是就是div标签，也可以是其他的HTML标签,比如input，select，img等等都可以的

如下面的代码所示，当isshow==1时就使用叫ScaleBox的组件，否则就是一个div的标签，这种主要是在动态控制是否使用ScaleBox这个组件，但是呢通过v-if或者v-show是不能实现的，被组件包裹的div因为某些原因必须显示，是不能被隐藏的，

      <component :is="isshow==1 ? 'ScaleBox': 'div'">  
    <div class="box"> 内容</div>
    </component>  

2.style样式

is 为style时可以设置样式，但是没有scoped会样式污染，不推荐写在局部，写全局的可以；

当满足条件时，就使用green_color这个样式，让下面的带有green_color的颜色变成绿色。

      <component :is="isshowBox==1 ? 'ScaleBox':isshowBox==2 ? 'style' : 'div'">  
         //创建样式        
           .green_color{
                color:green
            }
    </component>  

    //使用green_color
    <div class="green_color">123333  setStyle：green_color</div>