Vue-动态组件和插槽

一、动态组件

动态组件指的是动态切换组件的显示与隐藏。

如何实现动态组件渲染

vue 提供了一个内置的 组件，专门用来实现动态组件的渲染。

使用方法：


当我们使用默认这种写法时，我们会发现，如果在right进行了操作，再切换到left，再次切换到right时，right上的操作不会缓存下来
我们就通过以下方式，解决这一问题：

使用 keep-alive 保持状态

keep-alive默认缓存所有组件，我们可以通过include属性，来自己选择缓存哪些部分

include：

只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔

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

只有组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
当组件被激活以及组件第一次被创建的时候时，会自动触发组件的 activated 生命周期函数

二、插槽

插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

默认插槽使用方法：

页面显示效果：

★ 注意：如果在封装组件时没有预留任何 插槽，则用户提供的任何自定义内容都会被丢弃。

后备内容：

封装组件时，可以为预留的 插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。

具名插槽

如果标签没有显示的指定要渲染到哪个插槽中，则会被渲染到名字为default的插槽里面去

注意：要在 元素上使用 v-slot 指令

页面显示效果：

具名插槽的简写形式：

把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header可以被重写为 #header：

作用域插槽

在封装组件的过程中，可以为预留的 插槽绑定 props 数据，这种带有 props 数据的 叫做“作用域插槽”。