Vue之组件（插槽slot与可复用组件）

我就是我 2023-06-11 13:23 50阅读 0赞

## 课程大纲 ##

*  （1）插槽基础案例
 *  （2）插槽分类
 *  1、单个默认插槽
 *  2、具名插槽
 *  3、作用域插槽
 *  4、解构插槽
 *  （3）v-slot新语法
 *  （4）编写可复用组件

## 前言 ##

*  前言及场景：
    
     *  插槽概念在Vue中十分重要
     *  在很多第三方的Vue模块或插件中都会大量使用插槽
 *  作用：通过插槽slot可以更加方便的向子组件传递DOM元素，同时子组件使用插槽内容也十分简单，大大简化了代码，增加了代码可读性。

## 插槽slot ##

*  首先创建个基础组件，然后在页面调用显示，如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]
 *  需求升级：
 *  要求子组件中除了展示p标签的文章主体外，还要展示文章标题h2
 *  这里注意：
 *  要求文章标题并不是子组件决定，而是由父组件传递过来的
 *  **父组件传递写法**
 *  父组件通过属性形式向子组件传值，即父传子借助props属性向下传值  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]
 *  上图 分析：  
    解析后发现标题标签h2发生转义，即被转义为普通字符，没有被浏览器识别
 *  父组件传递写法  
    如果不想被转义，接下来需要借助v-html即原始HTML指令编译代码**加粗样式**
 *  父组件传递写法  
    如果不想被转义，接下来需要借助**v-html**即原始HTML指令编译代码  
    ![在这里插入图片描述][20191030194731125.png]
 *  再次验证发现，此时便可以正常编译解析。
 *  父组件传递写法缺点分析：
 *  上述代码虽然可以解决问题，但缺点也很明显
 *  缺点一：多余嵌套标签  
    ![在这里插入图片描述][20191030194819346.png]
 *  缺点二：模板代码多时不简洁，过于累赘，不方便阅读  
    ![在这里插入图片描述][20191030194832990.png]
 *  目前为止，如果想通过父组件传值方式，直接在组件里显示标题标签h2还无法实现，必须在外面包裹嵌套div标签，且传递内容较多时，代码难以阅读。
 *  综上所述，当子组件部分内容是通过父组件传递DOM进行显示时，可以不用上述这种父组件props传值的比较挫的语法，Vue中提供了一种新型语法：插槽slot。
 *  默认插槽案例：
 *  接下来以插槽形式介绍下如何在父组件向子组件优雅传递DOM结构
 *  修改上述案例，将代码修改如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]
 *  小结：
 *  1、插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性；
 *  2.插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制
 *  **插槽分类有很多种，本节将一一介绍**
 *  （1）单个插槽/默认插槽
 *  （2）具名插槽
 *  （3）作用域插槽
 *  （4）解构插槽

## 单个默认插槽slot ##

*  插槽分类一：单个插槽(备胎插槽)
 *  出现缘由：
 *  最初在 `<slot>` 标签中的任何内容都被视为备用内容。
 *  备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。
 *  插槽分类一：单个插槽(备胎)
 *  （1）宿主元素不为空时，显示宿主元素里内容，不显示备用内容  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]
 *  插槽分类一：单个插槽(备胎)
 *  （2）宿主元素为空时，显示备用内容  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]
 *  插槽分类一：单个插槽(备胎)也叫—→默认插槽
 *  插槽的作用就是组件外部取代码片段放到组件内部来
 *  1、定义默认插槽通过slot组件定义，定义好了之后，就相当于一个坑
 *  2、组件innerHTML位置以后不管有任何代码，都会被放进插槽那个坑里面去  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]

## 插槽官方描述 ##

*  官方文档描述：
 *  Vue 实现了一套内容分发的 API，将 `<slot>` 元素作为承载分发内容的出口
 *  插槽内可以包含任何模板代码，包括 HTML模板代码，甚至可以是其它的组件。
 *  通俗理解：
 *  没有插槽的情况下在组件标签内写一些内容是不起任何作用的，当在组件中声明了`<slot></slot>`插槽元素后，在组件元素内写的内容就会跑到它这里了，即插槽此时充当承载分发内容的出口！

## 具名插槽slot ##

*  首先看个案例，结合案例了解下具名插槽的概念
 *  （1）在子组件中定义了三个slot标签，其中有两个分别添加了name属性header和footer。即通过给slot添加name属性，来指定当前slot的名字  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]
 *  （2）第二步，多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]  
    **具名插槽小结**  
    （1）具名插槽其实就是在父组件中添加一个 slot=‘自定义名字’ 的属性，然后在子组件中的 `<slot><slot>` 里面添加 name=‘自定义名字’ 即可  
    （2）如果父组件中有一部分没有添加 `slot` 属性，则此处就是默认的插槽，在子组件中的 `<slot></slot>` 直接就是使用的父组件的默认插槽部分  
    （3）如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

## 作用域插槽slot ##

*  **简介：**
    
     *  作用域插槽为Vue2.1.0版本新增，是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。
     *  父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
     *  不过，我们可以在父组件中使用 slot-scope 特性从子组件获取数据。前提是需要在子组件中使用 :data=data 先传递 `data` 的数据。
 *  接下来结合具体案例来了解下… …
 *  作用域插槽案例
    
     *  （1）传递数据：在子组件中使用 :data=data 先传递 data 的数据  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]
 *  （2）获取数据：在父组件中使用 slot-scope 特性从子组件获取数据  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]
 *  **注意：**  
    （1）在父级中，具有特殊特性 slot-scope 的 `<template>` 元素必须存在，表示它是作用域插槽的模板(在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于 `<template>`)。  
    （2）slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象  
    （3）在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样，接下来父组件中使用 slot-scope 特性从子组件获取数据
 *  应用场景：
    
     *  作用域插槽更典型的用例是在列表组件中，允许使用者自定义如何渲染列表的每一项，接下啦结合案例来介绍下
 *  （1）定义基本组件并引用  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]
 *  （2）子组件要实现一个功能“循环显示一个列表”，所以首先需要引入数据，进行循环展示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]
 *  （3）需求升级
 *  blog子组件可能在很多地方调用，希望在不同地方调用blog组件时
 *  但是：注意这里要求列表的循环和样式不是由子组件决定，而是外部决定的，修改代码如下
 *  1、传递数据下图：  
    ![在这里插入图片描述][2019103020021680.png]  
    2、获取显示数据下图：  
    ![在这里插入图片描述][20191030200250750.png]
 *  （3）需求升级
 *  此时，blog组件循环的每一项怎么显示，由外部告知决定
 *  即父组件调用子组件时给子组件传递对应模板，完整代码如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]
 *  （4）父组件修改模板
 *  正如之前所说，blog组件循环的每一项怎么显示，由外部告知决定
 *  即父组件调用子组件时给子组件传递对应模板，例如这里我想将模板改为h6，如下所示  
    ![在这里插入图片描述][20191030200357250.png]
 *  此时，模板便会呈现出父组件传递的样式去显示
 *  （5）条件判断渲染
 *  到目前为止，便可以在元素上随便操作了
 *  例如：当书本名字长度等于3的时候，在前面加个“你好”标志  
    ![在这里插入图片描述][20191030200439710.png]

## 解构插槽slot ##

*  解构插槽：
 *  v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JS表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：  
    ![在这里插入图片描述][20191030200521229.png]
 *  这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候
 *  **解构插槽prop 重命名**  
    解构插槽同样开启了 prop 重命名等其它可能  
    例如将 data 重命名为 book：  
    ![在这里插入图片描述][20191030200556232.png]

## v-slot新语法 ##

*  **作用域插槽slot-scrop新语法**  
    版本：自 2.6.0 起有所更新，已废弃使用 slot-scope 语法，开始使用v-slot进行替代，如下所示  
    ![在这里插入图片描述][20191030200620351.png]  
    **因为Vue版本向前兼容，所以不管使用旧语法还是新语法，都会正常支持。**
 *  **作用域插槽slot-scrop新语法**  
    版本：自 2.6.0 起有所更新，已废弃使用 slot-scope 语法，开始使用v-slot进行替代，如下所示  
    ![在这里插入图片描述][20191030200704178.png]  
    因为Vue版本向前兼容，所以不管使用旧语法还是新语法，都会正常支持。
 *  **作用域插槽slot-scrop新语法**  
    你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]

## 编写可复用组件 ##

*  编写可复用组件注意事项：
    
     *  在编写组件时，最好考虑好以后是否要进行复用。一次性组件间有紧密的耦合没关系，但是可复用组件应当定义一个清晰的公开接口，同时也不要对其使用的外层数据作出任何假设。
 *  Vue 组件的 API 来自三部分——prop、事件和插槽：
    
     *  1、Prop 允许外部环境传递数据给组件；
     *  2、事件允许从组件内触发外部环境的副作用；
     *  3、插槽允许外部环境将额外的内容组合在组件中。

# 完毕… #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230531/52cf79ae997247e9864e1274213b2422.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230531/851f373e5b254fd885c97b6675f90749.png
[20191030194731125.png]: /images/20230531/717f1decafee428da5bbc238cae41d8a.png
[20191030194819346.png]: /images/20230531/bf9ad0d64cdc4c18aa89e3b9c8c4070e.png
[20191030194832990.png]: /images/20230531/78ba0c05c4b44eac947fcdc6ff6237e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230531/7a624f51485a4387b74281e8dda8ed78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230531/84adf4ef0f46483e9024153d4b9e745e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230531/2b7581d092f54b0aa4491178ac815861.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: /images/20230531/34a203f1a0484f44b81ba5ef3c3e6774.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: /images/20230531/f21df48bf2b4484baf9d777f27d392f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: /images/20230531/2c0406888a0c453d9b68d26ec6809ee6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: /images/20230531/f5e8d7a925a5435aa5858bb8ae410735.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]: /images/20230531/aa2baa5db00c4bf1a69b6253d8f6108a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]: /images/20230531/7be1754e6cc647b4b515280f9a47d1b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]: /images/20230531/c3fc6bcde494474ba517dc4fa3a9a9fc.png
[2019103020021680.png]: /images/20230531/a478657a39a34c6388346a2164ed8678.png
[20191030200250750.png]: /images/20230531/da260166947d43e8a2c7290f2da3d483.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]: /images/20230531/4909ef248f0f42e48780f6a5b03b1486.png
[20191030200357250.png]: /images/20230531/a199b179fb964174aedc5f24bddb1a76.png
[20191030200439710.png]: /images/20230531/5856260f8203430dae622de5d6ab54ee.png
[20191030200521229.png]: /images/20230531/498676febcd34bea8faa9ced312c8628.png
[20191030200556232.png]: /images/20230531/f464a0e37a4842569a7e59d3b01b81df.png
[20191030200620351.png]: /images/20230531/86b1db5ae2ad4bd4a411f49928e7c186.png
[20191030200704178.png]: /images/20230531/ebb363c65cf94b289c4d0de83d1f802d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 13]: /images/20230531/203f405fcec547cdb93db9490f316441.png