什么是槽？

槽是Vue提出的一个概念。就像它的名字一样，slot是用来决定把它承载的内容插入到指定的位置，这样模板就可以分块了，具有模块化的特点，可重用性更强。插槽是否显示由父组件控制，而插槽显示的位置由子组件控制

Vue槽原理

web-components中有slot的概念，https://developers . Google.com/web/基本面/web-components/shadowdom。

槽元素

影子DOM使用槽元素将不同的DOM树组合在一起。Slot是组件内部的占位符，用户可以用自己的标签填充它。

通过定义一个或多个槽，可以将外部标签引入组件的阴影DOM中进行渲染。这相当于说“在这里渲染用户的标记”。

注意：Slot是为网络组件创建“声明性API”的一种方式。它们被混合到用户的DOM中，这有助于渲染整个组件，从而将不同的DOM树组合在一起。

如何使用插槽？

默认插槽

父组件

模板div我是父组件slotOne1 p style='color:red '我是父组件slot content/p/slot one 1/div/template编写您希望在父组件引用的子组件中显示的内容(您可以使用也可以不使用标记)

子组件(插槽1)

模板div class='slotOne1' div我是slotOne1组件/div插槽/插槽/div/模板。在子组件中写一个槽，槽所在的位置就是父组件想要显示的位置。

当然，其他组件也可以写入父组件引用的子组件中

父组件

模板div我是父组件slotOne1 p style='color:red '我是父组件slot content/p slot-one 2/slot-one 2/slot one 1/div/模板子组件(slotOne2)

模板div class='slotOne2 '我是slotOne2组件/div/模板

命名槽

子组件

模板div class=' slot tw ' div slot wo/div slot name=' header '/slot slot/slot name=' footer '/slot/div/模板在子组件中定义了三个slot标签，其中两个分别添加了名称属性header和footer

父组件

Template div我是父组件slot-two p la la la la la，我是卖报纸的小能手/p template slot='header' p我是一个名为header/p/template p slot=' footer '的slot，我是一个名为footer/p/slot-two/div/Template在父组件中使用Template并写入相应的slot值来指定内容在子组件中的实际位置(当然不一定要写入模板)，其他没有对应值的内容会放在slot中不添加

插槽的默认内容

父组件

模板div我是父组件插槽-二/插槽-二/div/模板的子组件

我不是卖报纸的专家。/slot /div/template可以在子组件的slot标签中写入内容。当父组件不写内容时，它将显示子组件的默认内容。当父组件写入内容时，它将替换子组件的默认内容。

编译范围

父组件

Template div我是父组件slot-two p { { name } }/p/slot-two/div/templatescriptexportdefault { data(){ return { name:' jack ' } } }脚本的子组件

模板div class='slottwo '插槽/插槽/div/模板

范围槽

子组件

Template div我是作用域槽slot : data=' user '/slot/div/templatescriptexportdefault { name : ' slot throw '的子组件。data(){ return { user :[{ name : ' jack '，sex:' boy'}，{name:' jone '，sex:' girl'}，{name:' Tom '，sex3360' boy '。

父组件

Template div我是作用域槽槽槽-三模板槽-作用域=' user ' div v-for=' item in user.data ' : key=' item . id ' { item } }/div/template/slot-三/div/template使用父组件上的槽-作用域属性，user . data为

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。