Vue - 第五天动态组件& 插槽& 自定义指令

本文链接：https://blog.csdn.net/qq_41050821/article/details/131055154

动态组件& 插槽& 自定义指令

一、动态组件
二、插槽
三、自定义指令

一、动态组件

1.什么是动态组件

动态组件是指在应用程序运行时动态加载和卸载的组件。通常，组件在应用程序启动时就已经加载了，但是在某些情况下，我们可能需要动态地加载组件，例如当某些组件只有在特定条件下才需要使用时。

2.如何实现动态组件渲染

vue提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染。示例代码如下：

在这里插入图片描述

<template>
	<!-- 2 通过is属性，动态指定要渲染的组件 -->
	<component :is="comName"></component>
	
	<!-- 3 点击按钮，动态切换组件 -->
	 <button @click="comName= 'Left'">展示左组件</button>
     <button @click="comName= 'Right'">展示右组件</button>
</template>

<script>
// 引入子组件
import Left from './components/Left.vue';
import Right from './components/Right.vue';
export default {
     
  // 根组件的数据
  data() {
     
    return {
     
      comName: '', // 记录当前显示的子组件名称
    }
  },
  // 引入子组件
  components: {
     
    Left,
    Right
  }
}
</script>

3.使用 keep-alive 保持状态

默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 <keep-alive> 组件保持动态件的状态。示例代码如下：

 <!-- 使用 keep-alive 包裹动态组件，实现组件缓存 -->
      <KeepAlive>
        <component :is="currentComponent"></component>
      </KeepAlive>

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

当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
当组件被激活时，会自动触发组件的 activated 生命周期函数。
在这里插入图片描述

在这里插入图片描述

5. keep-alive 的 include 属性

include属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔：

在这里插入图片描述

<KeepAlive include="MyLeft,MyRight">
        <component :is="comName"></component>
 </KeepAlive>

exclude属性用来指定：只有名称不匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔。

6.动态展示左右组件

最终实现效果，在展示右组件时，左组件被缓存，计数器数据得到保存。

<template>
  <!-- 根组件模板 -->
  <div class="app-container">
    <!-- 根组件内容 -->
    <h1>App 根组件</h1>
    <hr />

    <!-- 切换展示子组件的按钮 -->
    <button @click="currentComponent = 'Left'">展示左组件</button>
    <button @click<