学习VUE第十二天课程（VUE之组件（插槽slot与可复用组件））

曾经终败给现在 2023-06-11 12:29 13阅读 0赞

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

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

# 插槽slot #

**首先创建个基础组件，然后在页面调用显示，如下所示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]  
**父组件传递写法  
父组件通过属性形式向子组件传值，即父传子借助props属性向下传值**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]  
**父组件传递写法  
如果不想被转义，接下来需要借助v-html即原始HTML指令编译代码**

![在这里插入图片描述][201910301846316.png]

**再次验证发现，此时便可以正常编译解析。**

**父组件传递写法缺点分析：  
上述代码虽然可以解决问题，但缺点也很明显  
缺点一：多余嵌套标签**

![在这里插入图片描述][20191030184649422.png]

**缺点二：模板代码多时不简洁，过于累赘，不方便阅读**  
![在这里插入图片描述][20191030184655553.png]  
**目前为止，如果想通过父组件传值方式，直接在组件里显示标题标签h2还无法实现，必须在外面包裹嵌套div标签，且传递内容较多时，代码难以阅读。**

**综上所述，当子组件部分内容是通过父组件传递DOM进行显示时，可以不用上述这种父组件props传值的比较挫的语法，Vue中提供了一种新型语法：插槽slot。**

**默认插槽案例：  
接下来以插槽形式介绍下如何在父组件向子组件优雅传递DOM结构  
修改上述案例，将代码修改如下所示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

## 小结： ##

**1、插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性；  
2、插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制**

### 插槽分类有很多种，本节将一一介绍 ###

**（1）单个插槽/默认插槽  
（2）具名插槽  
（3）作用域插槽  
（4）解构插槽**

# 单个默认插槽slot #

**插槽分类一：单个插槽(备胎插槽)**

## 出现缘由： ##

**最初在 标签中的任何内容都被视为备用内容。  
备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。**

## 插槽分类一：单个插槽(备胎) ##

**（1）宿主元素不为空时，显示宿主元素里内容，不显示备用内容**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]

#### 插槽分类一：单个插槽(备胎) ####

**（2）宿主元素为空时，显示备用内容**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]

# 单个默认插槽slot #

**插槽分类一：单个插槽(备胎)也叫—→默认插槽**  
插槽的作用就是组件外部取代码片段放到组件内部来  
1、定义默认插槽通过slot组件定义，定义好了之后，就相当于一个坑  
2、组件innerHTML位置以后不管有任何代码，都会被放进插槽那个坑里面去  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]

# 插槽官方描述 #

官方文档描述：  
Vue 实现了一套内容分发的 API，将 元素作为承载分发内容的出口  
插槽内可以包含任何模板代码，包括 HTML模板代码，甚至可以是其它的组件。

通俗理解：  
没有插槽的情况下在组件标签内写一些内容是不起任何作用的，当在组件中声明了插槽元素后，在组件元素内写的内容就会跑到它这里了，即插槽此时充当承载分发内容的出口！

# 具名插槽slot #

**首先看个案例，结合案例了解下具名插槽的概念**  
（1）在子组件中定义了三个slot标签，其中有两个分别添加了name属性header和footer。即通过给slot添加name属性，来指定当前slot的名字  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]  
**具名插槽案例：**  
（2）第二步，多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]

## 具名插槽小结 ##

**（1）具名插槽其实就是在父组件中添加一个 slot=‘自定义名字’ 的属性，然后在子组件中的 里面添加 name=‘自定义名字’ 即可  
（2）如果父组件中有一部分没有添加 slot 属性，则此处就是默认的插槽，在子组件中的 直接就是使用的父组件的默认插槽部分  
（3）如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。**

## 作用域插槽slot ##

**简介：  
作用域插槽为Vue2.1.0版本新增，是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。  
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。  
不过，我们可以在父组件中使用 slot-scope 特性从子组件获取数据。前提是需要在子组件中使用 :data=data 先传递 data 的数据。  
接下来结合具体案例来了解下… …**

#### 作用域插槽案例 ####

**（1）传递数据：在子组件中使用 :data=data 先传递 data 的数据**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]

**（2）获取数据：在父组件中使用 slot-scope 特性从子组件获取数据**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]、

## 注意： ##

**（1）在父级中，具有特殊特性 slot-scope 的 元素必须存在，表示它是作用域插槽的模板(在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于 )。  
（2）slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象  
（3）在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样，接下来父组件中使用 slot-scope 特性从子组件获取数据**

#### 应用场景： ####

**作用域插槽更典型的用例是在列表组件中，允许使用者自定义如何渲染列表的每一项，接下啦结合案例来介绍下**  
**（1）定义基本组件并引用**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]  
**（2）子组件要实现一个功能“循环显示一个列表”，所以首先需要引入数据，进行循环展示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]  
**（3）需求升级  
blog子组件可能在很多地方调用，希望在不同地方调用blog组件时  
但是：注意这里要求列表的循环和样式不是由子组件决定，而是外部决定的，修改代码如下**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]  
**（3）需求升级  
此时，blog组件循环的每一项怎么显示，由外部告知决定  
即父组件调用子组件时给子组件传递对应模板，完整代码如下所示**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]  
**（4）父组件修改模板  
正如之前所说，blog组件循环的每一项怎么显示，由外部告知决定  
即父组件调用子组件时给子组件传递对应模板，例如这里我想将模板改为h6，如下所示**  
![在这里插入图片描述][20191030185815234.png]

## 此时，模板便会呈现出父组件传递的样式去显示 ##

**（5）条件判断渲染  
到目前为止，便可以在元素上随便操作了  
例如：当书本名字长度等于3的时候，在前面加个“你好”标志**  
![在这里插入图片描述][2019103018584243.png]

# 解构插槽slot #

**解构插槽：  
v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JS表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：**  
![在这里插入图片描述][20191030185906960.png]

##### 这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候 #####

**解构插槽prop 重命名  
解构插槽同样开启了 prop 重命名等其它可能  
例如将 data 重命名为 book：**  
![在这里插入图片描述][2019103018593278.png]

# v-slot新语法 #

**作用域插槽slot-scrop新语法  
版本：自 2.6.0 起有所更新，已废弃使用 slot-scope 语法，开始使用v-slot进行替代，如下所示**

![在这里插入图片描述][20191030185954961.png]

**因为Vue版本向前兼容，所以不管使用旧语法还是新语法，都会正常支持。**

## 作用域插槽slot-scrop新语法 ##

**你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]

## 编写可复用组件 ##

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

# 以下为作用域插槽案例： #

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>插槽slot</title>
        <script type="text/javascript" src="./vue-2.6.9.min.js"></script>
    </head>
    <body>
        <div id="root">
            <blog>
                <template v-slot="{data = '未定义'}">
                    <h6>{
       {data}}</h6>
                </template>
            </blog>
        </div>
        <script type="text/javascript">
            Vue.component('blog',{
                data(){
                    return {
                        books:[undefined,'龙珠','犬夜叉','奥特曼']
                    }
                },
                template:`
                    <div>
                        <ul>
                            <li v-for="book of books">
                                <slot :data="book"></slot>
                            </li>
                        </ul>
                    </div>
                `
            })
            var root = new Vue({
                el:'#root'
            })
        </script>
    </body>
    </html>

## 如有问题或者疑问留留言联系小编！！！ ##

## 感谢来访！！！ ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: /images/20230531/a5770d20718a44e5b4653ee45d6a14b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20230531/fc75feb791a74c498752eb285be6cbbb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: /images/20230531/8e107a778a3047d0a5ccc93e89464cc4.png
[201910301846316.png]: /images/20230531/e5de403d7bf748cfb9f90f5f21125b7c.png
[20191030184649422.png]: /images/20230531/d7c7c8c66a664c8aa5d14264a76afab5.png
[20191030184655553.png]: /images/20230531/b3c2b6d45d614391940d976c420c7682.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: /images/20230531/a2650b616b3b4529b41efbee9a3cb4c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: /images/20230531/3ff735f1a8114dcdb9a9f005a7b07b88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: /images/20230531/92be511d4022400e936ca85b414b8aec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: /images/20230531/365a4be38bd94be8952af4416bc8d509.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 7]: /images/20230531/dd39848cad1e4cb99207ab5b9a437ad0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 8]: /images/20230531/7fd7df98f3944e089be61791959f5e05.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 9]: /images/20230531/95ca0f793e7c47d39a9b8e09eef29e78.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 10]: /images/20230531/ef2d007d29c4484dae2605d674e028a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 11]: /images/20230531/8cbcbaabe1fe4e5e8c7cfd67d98321a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 12]: /images/20230531/429ec01f0cbd439b86f4db95c49d033e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 13]: /images/20230531/34c1be7c222b4cd78962e95d2512a5e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 14]: /images/20230531/211db15e48f848b8a90015bd2e4aff6a.png
[20191030185815234.png]: /images/20230531/be2393b5c1564c4e8c1adadb6657f3e4.png
[2019103018584243.png]: /images/20230531/7a18026fd60e491ca382208a67a5f0d7.png
[20191030185906960.png]: /images/20230531/95ede84839194b0895e6d4041b64528e.png
[2019103018593278.png]: /images/20230531/fddc2ac7669a47d4bcc02d6ff7f38f90.png
[20191030185954961.png]: /images/20230531/0347db6e4fb34ae786f02495f910b14e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 15]: /images/20230531/0757e4a38cf9491ebb4b7d3dc7b5e09f.png