首页 > 其他分享 >vue 中 slot 的使用方式,以及作用域插槽的用法

vue 中 slot 的使用方式,以及作用域插槽的用法

时间:2022-10-22 09:11:31浏览次数:47  
标签:slot vue 作用域 标签 使用 插槽 组件

 

使用场景:vue提供组件插槽能力, 允许开发者在封装组件时,把不确定的部分定义为插槽 ‘

<slot>夹着内容默认显示内容, 如果不给插槽slot传东西, 则使用<slot>夹着的内容在原地显示

 

组件进阶 - 具名插槽 slot 作为占位符 定义名字 使用 name 然后使用 template #title 或者 v-slot = title 回应占位符

==v-slot可以简化成#使用==

当一个组件内有2处以上需要外部传入标签的地方 ;

传入的标签可以分别派发给不同的slot位置 ;

v-slot一般用跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析内部标签)

 

组件进阶 - 作用域插槽

子组件里值, 在给插槽赋值时在父组件环境下使用

// 目标: 作用域插槽
// 场景: 使用插槽, 使用组件内的变量
// 1. slot标签, 自定义属性和内变量关联
// 2. 使用组件, template配合v-slot="变量名"
// 变量名会收集slot身上属性和值形成对象

 

 

标签:slot,vue,作用域,标签,使用,插槽,组件
From: https://www.cnblogs.com/zhulongxu/p/16815294.html

相关文章