Vue插槽
1. 介绍
什么是插槽：
根据业务需要，父组件可以给子组件传值，但一般传递的都是比较少量的信息(例如单个的String/Number/Boolean/Object/Array等)，如果要传递的数据非常多，例如一大段html标签内容，
则不合适，这时可以通过 插槽 实现
- 父子组件嵌套情形，子组件给自己个性化区域设置一个占位符，父组件给占位符填充内容，占位符就是 插槽。
2. 匿名插槽
- 匿名插槽定义语法：
<slot></slot>
在一个子组件中，允许出现多个匿名插槽，它们都会接收相同内容，但一般没有实际意义。
- 给插槽传递数据：
<子组件标签> 被填充到插槽的内容 </子组件标签>
应用：
App.vue应用按钮组件，通过插槽给按钮设置要显示文字内容：
步骤：
-
在components目录里边创建组件Button.vue，内容如下，其中有slot插槽体现：
<template> <div> <button> <!-- 通过slot放置一个占位符，将来父组件要传递内容过来填充，这个slot就是插槽 --> <slot></slot> </button> </div> </template> -
在App.vue实现如下代码，给子组件标签内容区域设置信息，其会被传递给插槽：
<template> <div> <h2>App根组件-插槽学习</h2> <!-- 给组件的“内容区域”填充信息，这个信息可以填充到子组件的slot插槽位置去 被填充的内容可以是：字符串、html标签、组件--> <com-button> <a href="#">确定</a> </com-button> <com-button> <i>取消</i> </com-button> <com-button> <strong>重置</strong> </com-button> </div> </template> <script> // 对Button按钮组件做 导入、注册、使用 import ComButton from './components/ComButton' export default { name: '', components: { ComButton } } </script>
注意：
- vue文件编译运行后，slot标签会被父组件传递的信息覆盖掉，即使没有接收到信息，slot本身也不在浏览器体现。
- 一个组件根据需要可以声明多个匿名slot插槽，每个slot会分别独立接收到相同的内容，匿名插槽在一个组件中通常只会出现一个。
- 父组件给插槽传递的信息可以是 html标签 或 字符串 或 组件 等内容，并且数量没有限制。
- 子组件标签内容区域信息必须与slot联系，如果子组件内部没有slot，那么这个信息会丢失。
3. 命名插槽
什么是命名插槽：
子组件根据需要，内部可能有多个个性化区域，这样就需要定义多个slot插槽，为了加以区分，可以给slot定义名字，即 命名插槽。
命名插槽语法：
<slot name="s1"></slot>
<slot name="s2"></slot>
<slot name="s3"></slot>
- 通过name属性给插槽定义名字
父组件根据名字给插槽填充内容
<子组件>
<div slot="s1">填充给name="s1"的插槽中</div>
<div slot="s2">填充给name="s2"的插槽中</div>
<p>填充给匿名插槽</p>
<div slot="s3">填充给name="s3"的插槽中</div>
<p>填充给匿名插槽</p>
<子组件>
4. 命名插槽应用
案例：
制作一个Page.vue组件实现分页效果，其中 “上一页”、“下一页” 位置设置两个slot并定义名字
App.vue应用Page.vue时给slot传递信息:
步骤：
-
创建ComPage.vue组件并声明slot命名插槽
<template> <div> <ul> <!-- slot占位符决定显示的内容 --> <!-- 使用带有"名字"的插槽，使得各个插槽可以接收到不同的内容,通过 name 属性起名字 --> <!-- 插槽有名字，就是"命名插槽" --> <!-- 插槽没有名字，就是"匿名插槽" --> <slot name="one"></slot> <li>1</li> <li>2</li> <li>3</li> <slot name="two"></slot> </ul> </div> </template> -
App.vue 导入、注册、使用 Page.vue并传递信息
<template> <div> <h2>App根组件-插槽继续学习</h2> <!-- 使用分页组件 --> <com-page> <!-- 要给"指定名称"的插槽填充信息,要通过slot属性 --> <li slot="one">Prev</li> <li slot="two">Next</li> </com-page> </div> </template> <script> // 分页组件 导入、注册、使用 import ComPage from './components/ComPage' export default { name: '', components: { ComPage } } </script>
注意：
- 命名插槽 和 匿名插槽 可以同时存在，它们会分别接收自己的信息。
- 给 命名插槽 填充信息必须要通过 “html标签” 圈选，以便设置slot=xx的属性。
- 针对同一个命名插槽，可以接收多个不同的内容。
5. 作用域插槽
什么是作用域插槽：
插槽应用中，父组件给插槽填充的内容通常有两部分：html标签、数据部分，
实际情况是：父组件只传递html标签，数据信息要通过slot自己传递，
父组件关注外在表现，子组件插槽关注核心数据，
子组件给插槽定义要使用的数据，这个数据只是自己应用区域标签可见，故称为 作用域插槽。
- 有一个插槽，把本身要使用的数据都定义好了，就是“作用域插槽”
语法：
-
作用域插槽给自己声明数据：
<slot xx=xx yy=yy zz=zz></slot>- 通过"属性值"方式定义数据
插槽数据声明注意：
- 通过 属性值 方式声明数据，数量不限制，名称不能是name(其为命名插槽固定属性)。
- 匿名、命名插槽 都可以声明数据，实现作用域插槽。
- 插槽数据来源可以是 直接声明 的，也可以进行 属性绑定 获取本身组件实例的信息。
- 声明数据的类型不限制(例如String、Number、Boolean、Object、Array 都可以)。
- 父组件应用插槽数据
<子组件>
<html标签 slot-scope="名称">
{{ 名称.xx }}
{{ 名称.yy }}
{{ 名称.zz }}
</html标签>
</子组件>
插槽数据使用注意：
- 在html标签中声明属性值 slot-scope=名称 ，接收插槽声明的数据，名称是一个对象，成员就是插槽的属性名。
- 接收的信息如果是数组，可以通过v-for遍历。
- slot-scope 与 v-for 不能出现在同一个html标签中，确有需要，可以让它们出现在父子标签里边。
6. 作用域插槽应用
案例：
分页组件中“上页”、“下页” 的字符串信息要通过插槽提供，父组件自己不提供：
步骤：
-
创建名称为ComPage.vue的组件，给两个slot声明要使用的数据
<template> <div> <ul> <!-- 作用域插槽 --> <!-- 插槽定义自己要使用的数据：属性值方式声明数据 --> <!-- <slot xx=xx yy=yy></slot> --> <!-- 注意：数据的名称不要使用name属性，数据既可以直接声明，也可以设置属性绑定--> <slot name="one" up='上页'></slot> <li>1</li> <li>2</li> <li>3</li> <slot name="two" down='下页'></slot> <slot name="two" down='下页' city="beijing" :cat="obj"></slot> </ul> </div> </template> <script> export default { name: '', data () { return { obj: { color: 'red', leg: 4 } } } } </script> -
App.vue 导入、注册、使用 ComPage.vue 组件，接收、使用插槽的数据：
<template> <div> <h2>App根组件-作用域插槽学习</h2> <!-- 使用分页组件 --> <com-page> <!-- 接收插槽定义的数据，要通过slot-scope属性达成 stData:是一个对象，成员就是插槽数据的"属性名"--> <li slot="one" slot-scope="stData">{{ stData.up }}</li> <li slot="two" slot-scope="stData">{{ stData.down}}</li> <li slot="two" slot-scope="stData"> {{ stData.down+'---'+stData.city+'---'+stData.cat.color+'---- '+stData.cat.leg }} </li> </com-page> </div> </template> <script> // 分页组件 导入、注册、使用 import ComPage from './components/ComPage' export default { name: '', components: { ComPage } } </script>
作用域插槽v-for遍历应用：
-
插槽声明数组数据
<template> <div> <ul> <slot name="one" :movieList="obj"></slot> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </template> <script> export default { name: '', data () { return { obj: [ { id: 1001, name: '第十二个人' }, { id: 1002, name: '我不是赌神' }, { id: 1003, name: '我不是码神' } ] } } } </script> -
父组件接收数组数组并做遍历
<template> <div> <h2>App根组件-作用域插槽-v-for遍历应用</h2> <com-page> <!-- slot-scope接收数据: a. 要么{{}}直接访问 b. 如果被其他html标签应用，例如内部有v-for，这slot-scope被template标签设置使用 (template是雷锋标签，只运行，不显示)--> <template slot="one" slot-scope="stData"> <li v-for="item in stData.movieList" :key="item.id"> {{item.name}} </li> </template> </com-page> </div> </template> <script> // 分页组件 导入、注册、使用 import ComPage from './components/ComPage' export default { name: '', components: { ComPage } } </script>
注意：
slot-scope接收数据:
- a. 要么{{}}直接访问。
- b. 如果被其他html标签应用，例如内部有v-for，这slot-scope被template标签设置使用。 (template是雷锋标签，只运行，不显示)。
扫一扫
1614
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
