slot出现的时代背景
有时候,我们会遇到这么一个问题?
我们引入注册的组件时,在注册的组件里面写东西,发现东西显示不出来。这时候,我们就用到了slot。
Slot的通俗理解
是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中< slot >位置),当插槽也就是坑< slot name=”mySlot”>有命名时,组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容;
第一种
我们在父组件中注册的标签中写文字,发现文字并不会出来
例:
<Hello>
<span >第一个隐藏的内容</span>
<span style="color:red;">第二个隐藏的内容</span>
</Hello>
这时候,我们在子组件,在后面加上slot中
<div>
<slot></slot>
</div>
文字就可以显示出来
第二种
在父组件,注册的标签里用slot属性
例:
<Hello>
<span slot="first">第一个隐藏的内容</span>
<span slot="second" style="color:red;">第二个隐藏的内容</span>
</Hello>
在子组件中使用slot标签上的name属性
例:
<div>
<slot name="second"></slot>
</div>
这样会显示命名父组件slot属性定义的名字。
第三种
slot标签相同与微信小程序中的block标签,不会在页面中做任何渲染,只接受控制属性。
我在子组件中设置data数据
dt: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
子组件设置slot标签
<slot v-for="item in dt">{{item}} </slot>
父组件中导入子组件。