Vue--插槽

柔情只为你懂 2022-12-21 15:50 210阅读 0赞

原文网址：[Vue--插槽\_IT利刃出鞘的博客-CSDN博客][Vue--_IT_-CSDN]

# 其他网址 #

> [深入了解组件 - 插槽 - 《Vue.js v2.x 官方教程》 - 书栈网 · BookStack][- _ - _Vue.js v2.x _ - _ _ BookStack]

# 普通插槽 #

**其他网址**

> [Vue 2.6+ 你需要知道的 v-slot - 简书][Vue 2.6_ _ v-slot -]  
> [vue---slot，slot-scoped，以及2.6版本之后插槽的用法 - 站住，别跑 - 博客园][vue---slot_slot-scoped_2.6_ - _ -]

**说明**

> vue 在 2.6.0 中，具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)，它取代了 slot 和 slot-scope，这两个在vue2.6.x中已被废弃但未被移除。vue 3 中， slot 和 slot-scope会被直接移除。

**写法**

> v-slot有不同的写法。

> **具名插槽**
> 
> 父组件：<template v-slot:name1> 可以写为以下方式
> 
>     <template #name1>
> 
> 子组件：对应：<slot name='name1'><slot>

> **无名插槽**
> 
> 父组件所有不带插槽名字的<template>或者不在<template>中的内容，都会被放到子组件默认插槽中：<slot></slot>。
> 
> 实际上，这两种都会带有隐含的名字：default

**slot与v-slot区别**

> <table> 
>  <tbody> 
>   <tr> 
>    <td style="width:113px;"><strong>项</strong></td> 
>    <td style="width:384px;"><strong>slot</strong></td> 
>    <td style="width:398px;"><strong>v-slot</strong></td> 
>   </tr> 
>   <tr> 
>    <td style="width:113px;"><strong>用法</strong></td> 
>    <td style="width:384px;"> <p>父组件：&lt;template slot="test"&gt;&lt;template&gt;</p> <p>子组件：&lt;slot name=“test”&gt;&lt;/slot&gt;</p> </td> 
>    <td style="width:398px;"> <p>父组件：&lt;template v-slot:test&gt;&lt;template&gt;</p> <p>子组件：&lt;slot name=“test”&gt;&lt;/slot&gt;</p> </td> 
>   </tr> 
>   <tr> 
>    <td style="width:113px;"><strong>使用位置</strong></td> 
>    <td style="width:384px;"> <p>可用在任意标签，如：&lt;p slot="test"&gt;&lt;p&gt;</p> </td> 
>    <td style="width:398px;">只能用在 组件component 或者 template 上&nbsp;</td> 
>   </tr> 
>  </tbody> 
> </table>

# 作用域插槽 #

**其他网址**

> [vue作用域插槽，你真的懂了吗？][vue]  
> [slot-scope：作用域插槽特性：子组件传递数据给父组件\_灵灵7的博客-CSDN博客][slot-scope_7_-CSDN]

## **简介** ##

**具名作用域插槽写法**

> 父组件：<template v-slot:name1="data1"> //简写方式：<template \#name1="data1">
> 
> 子组件：对应：<slot name='name1' :data2="childData"><slot>
> 
> **prop名字问题**
> 
> 在使用时，父组件的取值的名字必须与子组件返回的相同，如下图加粗部分所示：
> 
> 父组件：<template \#test="data1"> \{ \{data1.**data2**\}\} </template>  
> 子组件：<slot name=“test” :**data2**=“testData”></slot>
> 
> **说明**：父组件的data1里边包含的就是这样的数据：\{"data2": testData绑定的对象\}，所以通过data1已经可以获取到数据了。

**默认作用域插槽写法**

> 默认插槽 可以写成 v-slot='xxx'。也就是：<template v-slot:default="xxx">
> 
> 注意：<template \#="xxx"> 这样写是不对的，\#之后必须带参数。

**作用域解构插槽**

> 父组件：<template v-slot="\{data2\}"> //这个名字（prop）必须对应下方加粗部分的名字
> 
> 子组件：对应：<slot name='name1' :**data2**="childData"><slot>
> 
> **说明**：
> 
> 1.可以对父组件prop重命名：<template v-slot="\{data2 : person\}">
> 
> 2.可以设置默认内容：<template v-slot="\{data2 : \{name: "Tony"\}\}">
> 
> 3.以上边为例，获取的data2是childData对应的对象。

**支持动态插槽名**

> <template v-slot:\[dynamicSlotName\]>

**slot与v-slot区别**

> <table> 
>  <tbody> 
>   <tr> 
>    <td style="width:113px;"><strong>项</strong></td> 
>    <td style="width:606px;"><strong>slot</strong></td> 
>    <td style="width:539px;"><strong>v-slot</strong></td> 
>   </tr> 
>   <tr> 
>    <td style="width:113px;"><strong>用法</strong></td> 
>    <td style="width:606px;"> <p>父组件：&lt;template slot="test" slot-scope=“data1”&gt; { {data1.data2}} &lt;/template&gt;</p> <p>子组件：&lt;slot name=“test” :data2=“testData”&gt;&lt;/slot&gt;</p> </td> 
>    <td style="width:539px;"> <p>父组件：&lt;template #test="{data1}"&gt; { {data1.data2}} &lt;/template&gt;</p> <p>子组件：&lt;slot name=“test” :data2=“testData”&gt;&lt;/slot&gt;</p> </td> 
>   </tr> 
>   <tr> 
>    <td style="width:113px;"><strong>使用位置</strong></td> 
>    <td style="width:606px;"> <p>可用在任意标签，如：&lt;p slot-scope:data="test"&gt;&lt;p&gt;</p> </td> 
>    <td style="width:539px;">只能用在 组件component 或者 template 上&nbsp;</td> 
>   </tr> 
>  </tbody> 
> </table>

## 基础实例 ##

**router/index.js**

>     import Vue from 'vue'
>     import Router from 'vue-router'
>     import CompA from "@/components/CompA";
>     
>     Vue.use(Router)
>     
>     export default new Router({
>       routes: [
>         {
>           path: '/compA',
>           name: 'compA',
>           component: CompA
>         }
>       ]
>     })

**components/CompA.vue（父组件）**

>     <template>
>       <div class="compA">
>         <p>CompA</p><hr>
>         <comp-b>
>           <template v-slot:name1="data1">
>             {
>         {data1}}
>           </template>
>         </comp-b>
>       </div>
>     </template>
>     
>     <script>
>     import CompB from "@/components/CompB";
>     
>     export default {
>       components: {CompB},
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>

**components/CompB.vue（子组件）**

>     <template>
>       <div class="compB">
>         <p>CompB</p>
>         <slot name="name1" :data2="user"></slot>
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       data() {
>         return {
>           user: {
>             lastName: 'Stark'
>           }
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>

**测试**

> 访问：[http://localhost:8080/\#/compA][http_localhost_8080_compA]
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70][]

## todo实例 ##

**简介**

> 本处在子组件中有要做的事情（包括已完成的和未完成的），然后父组件对其进行显示，如果已经完成，就在前边打个“√”。

**router/index.js**

**components/CompA.vue（父组件）**

>     <template>
>       <div class="compA">
>         <p>CompA</p><hr>
>         <comp-b>
>           <template v-slot:name1="data1">
>             <span v-if="data1.data2.isCompleted">√</span>
>             {
>         {data1.data2.title}}
>           </template>
>         </comp-b>
>       </div>
>     </template>
>     
>     <script>
>     import CompB from "@/components/CompB";
>     
>     export default {
>       components: {CompB},
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>

**components/CompB.vue（子组件）**

>     <template>
>       <div class="compB">
>         <p>CompB</p>
>         <ul>
>           <li v-for="todo in todoLists" v-bind:key="todo.id">
>             <slot name="name1" :data2="todo"></slot>
>           </li>
>         </ul>
>       </div>
>     </template>
>     
>     <script>
>     export default {
>       data() {
>         return {
>           todoLists: [
>             {
>               id: 1,
>               title: 'Do the dishes',
>               isCompleted: true,
>             },
>             {
>               id: 2,
>               title: 'Take out the trash',
>             },
>             {
>               id: 3,
>               title: 'Wash the clothes'
>             }
>           ]
>         }
>       }
>     }
>     </script>
>     
>     <style scoped>
>     
>     </style>

**测试**

[Vue--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/109732115
[- _ - _Vue.js v2.x _ - _ _ BookStack]: https://www.bookstack.cn/read/vue-v2.x/8302a4fa40c5d02d.md
[Vue 2.6_ _ v-slot -]: https://www.jianshu.com/p/a8951ffdf9de
[vue---slot_slot-scoped_2.6_ - _ -]: https://www.cnblogs.com/zjjDaily/p/10518546.html
[vue]: https://juejin.im/post/6844903812130422792
[slot-scope_7_-CSDN]: https://blog.csdn.net/weixin_41796631/article/details/83279992
[http_localhost_8080_compA]: http://localhost:8080/#/compA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70]: /images/20221120/50c6490ecc414a4bbec5c60d05e13787.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaXlpbmcwY2FuZ2xhbmc_size_16_color_FFFFFF_t_70 1]: /images/20221120/9c7d52ce92274bee8c8baa0a99681d93.png