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>
插槽注意事项
- 只能用于父组件向子组件传递 标签 + 数据 。
- 传递的插槽标签中的数据处理都需要定义所在父组件中。
【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】粘你一身大鼻嘎 : http://www.cnblogs.com/wjw1014
【CSDN地址】粘你一身大鼻嘎 : https://wjw1014.blog.csdn.net/
【Gitee地址】粘你一身大鼻嘎 :https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】粘你一身大鼻嘎 : http://www.cnblogs.com/wjw1014
【CSDN地址】粘你一身大鼻嘎 : https://wjw1014.blog.csdn.net/
【Gitee地址】粘你一身大鼻嘎 :https://gitee.com/wjw1014