菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端基础-付盼盼-20230625 [打印本页]

作者: 下潜 时间: 2023-6-29 18:44
标题: 前端基础-付盼盼-20230625
一、学习内容

Vue组件-插槽（slot）
需求: 在使用子组件的时候给子组件动态的添加一些内容
但是默认情况下使用子组件时在子组件中编写的元素是不会被渲染的
如果子组件中有部分内容是使用时才确定的, 那么我们就可以使用插槽。
插槽就是：==在子组件中放一个"坑", 以后由父组件来"填"==
插槽的用法
定义插槽
插槽的使用过程其实是==抽取共性、预留不同==；
 我们会将==共同的元素、内容依然在组件内==进行封装；
 插槽内可以包含任何：模板代码，包括 HTML，其他组件。
 同时会将==不同的元素使用slot作为占位==，让外部决定到底显示什么样的元素；
插槽的默认内容：当组件的使用者没有为插槽提供任何内容，则默认内容讲生效。如果提供了内容，默认内容将被替换。
匿名插槽
没有名字的插槽
虽然写多个匿名插槽不会报错, 但是在企业开发中推荐只能有一个匿名插槽
默认情况下有多少个匿名插槽, 我们填充的数据就会被拷贝多少份
这导致了所有插槽中填充的内容都是一样的
具名插槽
具名插槽顾名思义就是给插槽起一个名字，<slot> 元素有一个特殊的 attribute：name；
一个不带 name 的slot，会带有隐含的名字 default；
在使用时可以通过slot="name"方式, 指定当前内容用于替换哪一个插槽
作用域插槽
作用域插槽就是带数据的插槽, 就是让父组件在填充子组件插槽内容时也能使用子组件的数据
使用
1. 在slot中通过 v-bind:数据名称="数据名称" 方式暴露数据
2. 在父组件中通过 <template slot-scope="作用域名称"> 接收数据
3. 在父组件的 <template></template> 中通过作用域名称.数据名称或者数据结构方式使用数据
v-slot指令
v-slot指令是Vue2.6中用于替代slot属性的一个指令
在Vue2.6之前, 我们通过slot属性告诉Vue当前内容填充到哪一个具名插槽
从Vue2.6开始, 我们通过v-slot指令告诉Vue当前内容填充到哪一个具名插槽
注意点:
v-slot指令只能用在template标签上
可以使用#号替代v-slot:
动态插槽名
目前我们使用的插槽名称都是固定的；
我们可以通过 v-slot:[dynamicSlotName]方式动态绑定一个名称；

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)