vue slot插槽

vue slot插槽

作用：主要是用于父组件向子组件传递 标签+数据 （而 props 和自定事件只是传递数据）。
场景：一般是某个位置需要经常动态谢欢显示效果（比如说：饿了么）。

子组件定义插槽

在子组件中定义插槽，当父组件向指定插槽传递标签数据后，插槽处就对渲染了，否则的话，插槽处就不会被渲染。

<div>
	<!-- name属性值指定唯一的插槽名，父组件通过此名指定标签数据 -->
	<slot name="aaa" > 不确定的标签结构 1 </slot>
	<div>组件确定的标签结构</div>
	<slot name="bbb" > 不确定的标签结构 2 </slot>
</div>

父组件传递标签数据

<child>
	<!-- slot属性值对应子组件中的插槽的name属性值 -->
	<div slot='aaa' >向 name=aaa 的插槽处插入此标签数据</dv>
	<div slot='bbb' >向 name=bbb 的插槽处插入此标签数据</dv>
</child>

插槽注意事项

1. 只能用于父组件向子组件传递 标签 + 数据 。
2. 传递的插槽标签中的数据处理都需要定义所在父组件中。