Vue-插槽

# 匿名插槽

插槽是给组件模板添加动态的数据 . 由于没有指定名称则默认应用匿名插槽

关键字：slot

注意

匿名插槽即将被废除 , 因此笔记仅借参考 , 建议使用具名插槽
如果组件标签当中未使用标签 , 则使用默认插槽中的数据
多个匿名插槽会拷贝多份标签中的数据进行填充

示例

<div id="app">
   <son>
       <div>匿名插槽填坑1</div>
       <div>匿名插槽填坑2</div>
       <div>匿名插槽填坑3</div>
   </son>
</div>
....
<template id="son">
   <div>
       <div>头部</div>
       <slot>默认数据</slot>
       <div>尾部</div>
   </div>
</template>
<script>
   new Vue({
      el:"#app",
      data:{},
      components:{
          "son": {
              template:"#son"
          }
      }
   });
</script>

渲染结果：

<div id="app">
    <div>
        <div>头部</div> 
        <div>匿名插槽填坑1</div> 
        <div>匿名插槽填坑2</div> 
        <div>匿名插槽填坑3</div> 
        <div>匿名插槽填坑1</div> 
        <div>匿名插槽填坑2</div> 
        <div>匿名插槽填坑3</div> 
        <div>尾部</div>
    </div>
</div>

# 具名插槽

具体插槽是通过name属性进行赋予插槽 , 因此可以指定使用插槽

应用方式 : 在模板中的 slot标签添加属性 name属性值为名称即可实现具体插槽

示例

<div id="app">
   <son>
       <div slot="one">one内容11</div>
       <div slot="two">two内容22</div>
   </son>
</div>
....
<template id="son">
    <div>
        <div>头部</div>
        <slot name="one">默认内容1</slot>
        <slot name="two">默认内容1</slot>
        <div>尾部</div>
    </div>
</template>
<script>
    new Vue({
        el:"#app",
        data:{},
        components:{
            "son":{
                template:"#son"
            }
        }
    });
</script>

渲染结果：

<div id="app">
    <div>
        <div>头部</div> 
        <div>one内容11</div> 
        <div>two内容22</div> 
        <div>尾部</div>
    </div>
</div>

# 插槽作用域

插槽作用域是带数据的插槽 , 数据在填充插槽时一般不会传递数据的因此需要手动进行传递数据 , 否则无法应用

传递方式有两种：

具名插槽的传递

==#<插槽名>="<自定义获取名>"==
匿名插槽的传递

==slot-scope="<自定义获取名>"==

应用步骤：

在模板插槽的 slot标签中添加 vue指令 ==v-bind:<数据名> = "<参数>"== （可缩写

缩写：==:names="list"== （list为名称的数组数据）
在父组件模板中的插槽填充标签里以以下两个方式进行应用获取数据

==#<插槽名>="<自定义获取名>"==/==slot-scope="<自定义获取名>"==

注意

#<插槽名>="<自定义获取名>" 的用法是给具体插槽进行应用的
slot-scope="<自定义获取名>" 的用法是给 匿名/标签 插槽进行应用
匿名插槽的默认名称为 default , 也可通过该插槽名称进行传递数据

示例

<div id="app">
    <father></father>
</div>
....
<template id="Father">
    <son>
        <!-- 具体插槽应用 -->
        <template #one="alist">
            具体插槽 填充内容： {{alist.namelist1}}
        </template>
        <!-- 标签指定具体插槽应用 -->
        <div  slot="two" slot-scope="alist">
            标签指定具体插槽 填充内容： {{alist.namelist2}}
        </div>
        <!-- 匿名插槽应用 -->
            <template slot-scope="blist">
            匿名插槽 填充内容： {{blist.namelist3}}
        </template>
    </son>
</template>
<template id="Son">
    <div>
        <div>头部</div>
        <div>当前数据: {{list}}</div>
        <!-- 将当前与的数据进行传递给 插槽填充的数据进行应用 -->
        <!-- 指令应用原意：v-bind:<数据名> = "<参数>" -->
        <slot :namelist1="list" name="one">具体插槽 默认内容: {{list}}</slot>
        <br>
        <slot :namelist2="list" name="two">具体插槽 默认内容: {{list}}</slot>
        <br>
        <slot :namelist3="list">匿名插槽 默认内容：{{list}}</slot>
        <div>尾部</div>
    </div>
</template>
<script>
    new Vue({
        el:"#app",
        data:{},
        components:{
            "father":{
                template:"#Father",
                components:{
                    "son":{
                        template: "#Son",
                        data(){
                            return{
                                list:['张三','李四','王五','赵六']
                            }
                        }
                    }
                }
            }
        }
    })
</script>

渲染结果：

<div id="app">
    <div>
        <div>头部</div> 
        <div>当前数据: ["张三","李四","王五","赵六"]</div> 
        具体插槽 填充内容： ["张三","李四","王五","赵六"]
        <br> 
        <div>标签指定具体插槽 填充内容： ["张三","李四","王五","赵六"]
        </div> 
        <br> 
        匿名插槽 填充内容： ["张三","李四","王五","赵六"]
        <div>尾部</div>
    </div>
</div>

# Vue3插槽

直接上写法 , 自行体会

<!--父组件-->
<template>
	<div>
		<Son>
			<template #default>
				匿名插槽内容
			</template>
			<template #name>
				具名插槽内容
			</template>
			<!--接收传参-->
			<!--	<template v-slot:parameters="obj"> 原写法, 下方简写-->
			<!--<template #parameters="obj"> 无拆箱结构 : { "obj": { "name": "张三", "age": 18 } }-->
			<template #parameters="{ obj }">
				<!-- 含拆箱 -->
				具名插槽内容 => {{ obj }}
			</template>
		</Son>
	</div>
</template>

<!--Son 子组件-->
<template>
	<div>
		<h2>匿名插槽</h2>
		<slot/>
		<h2>具名插槽</h2>
		<slot name="name"></slot>
		<h3>插槽传参</h3>
		<slot name="parameters" :obj="user"></slot>
	</div>
</template>

<script setup>
import { ref } from 'vue'
const user = ref({
	name: '张三',
	age: 18
})
</script>

#Vue

← Vue-组件 Vue-指令→