vue中slot(插槽)详解,slot、slot-scope和v-slot 缺乏、安全感 2024-04-17 18:49 14阅读 0赞 # slot是什么 # slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是**组件的一块HTML模板**,这块模板**由使用组件者即父组件提供**。可以说是子组件暴露的一个让父组件传入自定义内容的接口。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70] # slot的作用 # 让用户可以拓展组件,去更好地复用组件和对其做定制处理 举一些例子,比如布局组件、表格列、下拉选项 # slot怎么用 # slot的用法可以分为三类,分别是**默认插槽、具名插槽、作用域插槽** **子组件中:** * 插槽用`<slot>`标签来确定渲染的位置,里面放如果父组件没传内容时的后备内容 * **具名插槽**用`name`属性来表示插槽的名字,不传为默认插槽 * **作用域插槽**在作用域上绑定属性来将子组件的信息传给父组件使用,这些属性会被挂在父组件slot-scope接收的对象上 //Child.vue <template> <div> <main> //默认插槽 <slot> //slot内为后备内容 <h3>没传内容</h3> </slot> </main> //具名插槽 <header> <slot name="header"> <h3>没传header插槽</h3> </slot> </header> //作用域插槽 <footer> <slot name="footer" testProps="子组件的值"> <h3>没传footer插槽</h3> </slot> </footer> </div> </template> <style scoped> div{ border:1px solid #000; } </style> ## 父组件在使用时: ## * \*\*默认插槽 \*\*的话直接在子组件的标签内写入内容即可 * **具名插槽**是在默认插槽的基础上加上`slot`属性,值为子组件插槽`name`属性值 * **作用域插槽**则是通过`slot-scope`获取子组件的信息,在内容中使用。这里可以用解构语法去直接获取想要的属性 // Parent.vue <child> <!-- 默认插槽 --> <div>默认插槽</div> <!-- 具名插槽 --> <div slot="header">具名插槽header</div> <!-- 作用域插槽 --> <div slot="footer" slot-scope="slotProps"> { {slotProps.testProps}} </div> </child> ### 渲染结果为 ### ![在这里插入图片描述][20190830102548161.png] # v-slot # 在vue2.6中。上述的API被软废弃(3.0正式废弃),取而代之的是内置指令v-slot,可以缩写为【#】 # 子组件用法保持不变,父组件中 # * `slot`属性弃用,具名插槽通过指令参数`v-slot:插槽名`的形式传入,可以简化为`#插槽名` * `slot-scope`属性弃用,作用域插槽通过`v-slot:xxx="slotProps"`的slotProps来获取子组件传出的属性 * `v-slot`属性只能在`template`上使用,但在\*\*【只有默认插槽时】\*\*可以在组件标签上使用 //Parent <template> <child> <!--默认插槽--> <template v-slot> <div>默认插槽</div> </template> <!--具名插槽--> <template #header> <div>具名插槽</div> </template> <!--作用域插槽--> <template #footer="slotProps"> <div> { {slotProps.testProps}} </div> </template> <child> </template> # 拓展用法: # 1. 同样可以通过解构获取`v-slot={user}`,还可以重命名`v-slot="{user:newName}"`和定义默认值`v-slot="{user = '默认值'}"` 2. 插槽名可以是动态变化的`v-slot:[slotName]` # 注意 # 1. 默认插槽名为`default`,可以省略default直接写`v-slot`,缩写为\#时不能不写参数,写成`#default`(这点所有指令都一样,v-bind、v-on) 2. 多个插槽混用时,v-slot不能省略default # 作用域插槽的原理 # slot本质上是返回VNode的函数,一般情况下,Vue中的组件要渲染到页面上需要经过`template>>render function >> NVode >> DOM`过程。组件挂载的本质就是执行渲染函数得到VNode,至于data/props/computed这些属性都是给VNode提供数据来源 在2.5之前,如果是普通插槽就直接是VNode的形式了,而如果是作用域插槽,由于子组件需要再父组件访问子组件的数据,所以父组件下是一个**未执行的函数**`(slotScopre) => return h('div',slotScope.msg)`,接受子组件的slotProps参数,在子组件渲染实例时会调用该函数传入数据。 在2.6之后,两者合并,普通插槽也变成一个函数,只是不接受参数了 # 大纲速记 # ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70 1] [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/04a881bd8529410fbbfc064c8e5a699f.png [20190830102548161.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/01f702b63a62413fb7bf6eb059a92378.png [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/de339f7b67fb458eb6cad40bebe199e2.png
还没有评论,来说两句吧...