• Vue2 零基础入门 Vue2 零基础入门第五天 5.1 动态组件 && 5.2 插槽

    Vue2 零基础入门

    Vue2 零基础入门第五天

    老师：黑马程序员

    文章目录

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

    5.1 动态组件
    5.1.1 什么是动态组件

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

    5.1.2 如何实现动态组件渲染

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

    在这里插入图片描述

    5.1.3 使用keep-alive保持状态

    默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组
    件的状态。

    在这里插入图片描述

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

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

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

    在这里插入图片描述

    5.1.5 keep-alive的include属性

    include 属性用来指定：只有名称匹配的组件会被缓存。

    多个组件名之间使用英文的逗号分隔。

    在这里插入图片描述

    5.2 插槽
    5.2.1 什么是插槽

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

    在这里插入图片描述

    可以把插槽认为是组件封装期间，为用户预留的内容的占位符。

    5.2.2 体验插槽的基础用法

    在封装组件时，可以通过元素定义插槽，从而为用户预留内容占位符。

    在这里插入图片描述

    【没有预留插槽的内容会被丢弃】

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

    在这里插入图片描述

    【后备内容】

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

    在这里插入图片描述

    5.2.3 具名插槽

    如果在封装组件时需要预留多个插槽节点，则需要为每个 插槽指定具体的 name 名称。这种带有具体
    名称的插槽叫做“具名插槽”。

    在这里插入图片描述

    没有指定 name 名称的插槽，会有隐含的名称叫做 “default”。

    【为具名插槽提供内容】

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