发布时间:2023-12-30 12:30
Document
我是插槽的内容
****** ******
我们使用slot标签在组件中定义插槽,当我们在调用组件的标签内写入内容的时候,这段内容会替换匿名的插槽,slot标签相当于一个占位符。
1.当插槽标签中有内容,而且组件标签内未插入任何数据时,页面会显示插槽标签内的内容,相当于是插槽的默认值。但是如果组件标签内插入了任意数据,页面则会显示组件标签插入的内容。 代码如下:
Document
2.如果有多个匿名插槽,则组件标签内的数据,会插入到所有的匿名插槽中。 代码如下:
Document
3.插槽中不仅可以插入数据,还可以插入模板和html代码。 代码如下:
Document
****** ******
我是子组件2
Document
我是插槽1传入的内容
在slot标签中使用name属性为每一个插槽指定名称,使用v-slot指令来指定数据应该插入的哪一个具名插槽中,需要重点注意的是v-slot这个指令只能写在template标签中。
Document
{{data.userInfo.name}}-{{data.userInfo.id}}
{{data.number}}