组件进阶

动态组件

多个组件使用同一个挂载点，并进行动态的切换，就是动态组件

动态组件类似于tab切换这种类型

通过<component>标签和:is属性来进行组件的切换

可以通过给:is属性一个变量，在添加点击事件来对变量的值进行修改以达到切换组件的效果

<template>
  <div>
      <button @click="Component1 = ''">第一个组件</button>
      <button @click="Component2 = 'UserInfo'">第二个组件</button>
      //通过点击事件改变change的值来切换组件
          <component :is="change"></component>
      </div>
</template>
<script>
// 目标: 动态组件 - 切换组件显示
// 场景: 同一个挂载点要切换 不同组件 显示
// 1. 创建要被切换的组件 - 标签+样式
// 2. 引入到要展示的vue文件内, 注册
// 3. 变量-承载要显示的组件名
// 4. 设置挂载点<component :is="变量"></component>
// 5. 点击按钮-切换comName的值为要显示的组件名
import Component1 from '组件1的地址'
import Component2 from '组件2的地址'
export default {
    data(){
        return {
          //定义一个变量来保存引入的组件
            comName: "UserName"
        }
    },
    components: {
        Component1,  //组件实例1
        Component2     //组件实例2
    }
}
</script>

仅仅只是举出一个例子，动态组件有许多切换的方式

组件缓存

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

<div>
    <!-- Vue内置keep-alive组件, 把包起来的组件缓存起来 -->
    <keep-alive>
        <component :is="comName"></component>
    </keep-alive>
</div>

补充生命周期方法：

• activated(){} 激活时触发
• deactivated(){} 失去激活时触发

组件插槽

修改组件内容，通过<slot>将组件添加不同的内容 Vue提供组件插槽能力，在组件不确定内容的情况下通过<slot>标签先代替内容的存在，这就是插槽，当组件渲染时，暂时顶替内容的<slot>标签会被替换成已经准备好的内容

父级组件

插槽内替换的内容，需要写在组件标签的内部

<template>
  <div id="container">
      <Pannel> 这里面的内容会替换掉组件内部的slot标签 </Pannel>
  </div>
</template>

<script>
import Pannel from "引入的组件地址";
export default {
  components: {
    Pannel,  //组件名
  },
};
</script>

子组件

使用<slot></slot>标签来进行占位操作，在渲染时会将组件标签内部的内容将其给替换掉

<!-- Pannel组件 -->
<template>
  <div>
         <h4>使用插槽</h4>
                <!-- slot标签占据内容部分 -->
                <slot></slot>
  </div>
</template>

注意：如果子组件内没有<slot></slot>标签，则组件标签内的任何内容都会被抛弃

默认内容

插槽可以设置默认内容，在组件标签里的内容无法渲染或无内容时作为替代而显示

<!-- Pannel组件 -->
<template>
  <div>
         <h4>使用插槽</h4>
                <!-- slot标签占据内容部分 -->
                <slot>这是一个默认内容 </slot>
  </div>
</template>

如果提供内容，默认内容不会显示

具名插槽

同一个组件内有多处需要用<slot>替换时，需要将不同的内容放到不同的位置，这时就需要通过名字来指向位置

要求：v-slot一般跟 template 标签使用（template标签不会渲染到页面）

在向具名插槽提供内容的时候，我们可以在一个