Vue匿名槽和作用域槽的合并和覆盖行为

Vue的测试版本：Vue.js v2.5.13

Vue文档：

slot元素可以使用特殊的功能名称来进一步配置如何分发内容。多个插槽可以有不同的名称。命名片段将匹配内容片段中具有相应片段属性的元素。

您仍然可以有一个匿名槽，这是默认槽，用作找不到匹配内容片段的备用槽。

具体应用时间：

1.匿名插槽的合并行为：

div id='app' myele div默认插槽div divfrom parent！/div divfrom parent！/div/div/myele/div window . onload=function(){ Vue.component(' myele '，{ template : ` div slot/slot/div ` })；new Vue({ El : ' # app ' })；};效果：内容合并

2.匿名作用域槽的覆盖行为：

div id=' app ' myele div slot-scope=' props ' div from parent！/div div from { { props . text } }/div/div slot-scope=' prop ' div from/div div { { prop . text } }/div/div/myele/div window . onload=function(){ vue.component(' myele '，{ template : ` div slot text=' child '/slot text=' child 2 '/slot//即使文本与上一行相同，也不会报告错误，开发环境/div ` })；new Vue({ El : ' # app ' })；};效果：基于后期范围槽的模板，绘制两次；

3.匿名槽模板和限定范围的槽模板是混合的：

div id='app' myele div默认槽/div div槽-作用域='props' divfrom parent！/div div from { { props . text } }/div/div/myele/div window . onload=function(){ Vue.component(' myele '，{ template : ` div slot/slot text=' child '/slot/div ` })；new Vue({ El : ' # app ' })；};效果：匿名槽是基于匿名作用域槽模板呈现的，即使你把匿名槽模板放在后面，也会有同样的结果；

可以看出，最好不要使用匿名和默认槽，而是使用命名槽，这样可以减少不确定性；

参考文件：

https://cn.vuejs.org/v2/guide/components.html#命名为插槽

摘要

以上是边肖介绍的Vue匿名槽和范围槽的合并和覆盖行为。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！