Vue3插槽怎么用
导读:本文共2168字符,通常情况下阅读需要7分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 一、v-slot 介绍v-slot 只能用在 template 或组件上使用,否则就会报错。v-slot 也是其中一种指令。使用示例://父组件代码<child-com><templatev-slot:nameSlot>插槽内容</template></child-com>//组件模板<slo... ...
目录
(为您整理了一些要点),点击可以直达。v-slot
只能用在 template
或组件上使用,否则就会报错。
v-slot
也是其中一种指令。
使用示例:
当组件中只有一个插槽的时候,可以不设置 slot
的 name
属性,v-slot 后可以不带参数,但是 v-slot
在没有设置 name 属性的插槽口也会带有隐含的 “default”。
匿名插槽使用:
虽然 v-slot
没有设置参数,但不能删除掉 ,否则插槽内容无法正常渲染。
一个组件中有多个插槽的时候,如果没有设置 v-slot 属性值,会默认把元素插到没有设置 name 属性值的 slot 组件中,为了把对应的元素放到指定的位置,就需要借助 v-slot
和 name
属性,把内容对应起来。
具名插槽使用:
具名插槽缩写:
v-slot
与 v-bind
、v-on
指令一样,也存在缩写。可以把 v-slot:
简写为 # 号。
如上述 v-slot:footer 可以简写为 #footer 。
上述的父组件代码可以简化为:
注意:和其他指令一样,只有存在参数时,才可以简写,否则是无效的。
有时让插槽内容能够访问子组件中才有的数据是很有用的。当一个组件被用来渲染一个项目数组时,这是一个常见的情况,我们希望能够自定义每个项目的渲染方式。
要使子组件上的属性在插槽内容上可用,需要给 slot
绑定一个属性。然后在 v-slot 处接收并定义提供插槽 props
名字。
使用示例:
v-slot
指令参数也可以是动态的,用来定义动态插槽名。
如:
此处使用的是函数,也可以直接使用变量。
Vue3插槽怎么用的详细内容,希望对您有所帮助,信息来源于网络。