深入了解vue中的插槽和插槽范围

写在前面

vue中对槽的描述非常简短，语言简洁。此外，它不同于常用的选项，如方法、数据、计算等。这可能会导致最先接触插槽的开发人员很容易产生“算了，以后再学，反正可以写基本组件”，于是vue描述文档就关闭了。

其实槽的概念很简单，下面分三个部分来描述。这一部分也是按照vue描述文档的顺序编写的。

在进入三个部分之前，让没接触过插槽的同学对什么是插槽有一个简单的概念：插槽，也就是插槽，是一个组件的HTML模板，这个模板是否显示，如何显示，由父组件决定。其实这里指出了一个槽的两个核心问题，即是否显示和如何显示。

由于插槽是模板，从模板类型来看，任何组件都可以分为两类：非插槽模板和插槽模板。非槽模板指的是html模板，它指的是' div，span，ul，table '。非插槽模板的显示和隐藏以及如何显示由插件控制。slot模板是一个slot，它是一个空壳，因为它的显示和隐藏，以及最终显示什么html模板都是由父组件控制的。但是槽的显示位置是由子组件决定的，父组件发送的模板将在以后随着槽写入组件模板而显示。

单槽|默认槽|匿名槽

第一个是单插槽，这是vue的官方名称，但也可以称为默认插槽，或者与命名插槽相反，我们可以称之为匿名插槽。因为它不需要设置name属性。

单个插槽可以放在组件中的任何位置，但是就像它的名称一样，一个组件中只能有一个这样的插槽。相应地，可以有许多命名槽，只要名称(名称属性)不同。

下面是一个例子来说明。

父组件：

模板div class='父亲' h3这是父组件/H3子div class=' tmpl ' span菜单1/span span菜单2/span span菜单3/span span菜单4/span span菜单5/span span菜单6/span/div/子/div/模板子组件：

模板div class='child' h3这里是子组件/h3槽/槽/div/模板。在这个例子中，因为父组件已经在子/子中编写了html模板，子组件匿名槽的模板如下。也就是说，使用了子组件的匿名槽，由下面的模板使用。

div class=' tmpl ' span menu 1/span span menu 2/span span menu 3/span span menu 4/span span menu 5/span span menu 6/span/div最终渲染结果如下图所示。

注意：所有演示都是为了便于观察而设计的。其中，父组件填充灰色背景，子组件填充浅蓝色。

命名槽

匿名槽没有名称属性，所以是匿名槽。如果插槽添加了名称属性，它将成为命名插槽。命名插槽可以在一个程序集中出现n次。出现在不同的地方。以下示例是具有两个命名插槽和一个插槽的组件。这三个槽由父组件以相同的css样式显示，但不同之处在于内容略有不同。

父组件：

模板div class='父亲' h3这里是父组件/H3子div class=' tmpl' slot=' up' span菜单1/span span菜单2/span span菜单3/span span菜单4/span span菜单5/span span菜单6/Span/Div class=' tmpl ' slot=' down ' Span菜单-1/span span菜单-2/span span菜单-3/span span菜单-4/span span菜单-5/span span菜单-6/Span/Div class=' tmpl ' Span菜单-1/span菜单

模板div class='child' /命名插槽插槽名称=' up '/插槽h3这里是一个子组件。/h3 //命名槽槽名='down'/slot //匿名槽槽/slot/div/模板显示结果如图所示：

如您所见，父组件通过html模板上的slot属性关联命名的slot。默认情况下，没有槽属性的Html模板与匿名槽相关联。

作用域插槽|包含数据的插槽

最后，是我们的范围槽。这有点难以理解。官方称之为范围槽。其实和前面两个槽相比，我们可以称之为有数据的槽。什么意思，前两个是写在组件的模板里的

匿名槽

插槽/插槽

命名槽

插槽名称=' up '/插槽

但是，作用域槽要求数据绑定在槽上。也就是说，你必须写这样的东西。

slot name=' up ' : data=' data '/slot export default { data : function(){ return { data :['张山'，'子'，'万武'，'刘钊'，'天齐'，'小巴']}}，

当编写子html模板/子时，槽必须总是在浏览器上显示一些东西。如果没有写，插槽就是一个空的外壳，什么都没有。好的，当我们说有一个html模板的时候，也就是当一个父组件将一个模板插入到一个子组件的时候，插入什么样的样式是由父组件的html css决定的，但是这个样式里面的内容是什么呢？

因为作用域槽绑定了一组数据，所以父组件可以使用它。因此，情况变成这样：样式的父组件拥有最终决定权，但内容可以显示子组件插槽绑定。

让我们比较范围槽和单槽以及命名槽之间的区别。因为单槽和命名槽没有与数据绑定，所以父组件提供的模板应该包括样式和内容。在上面的例子中，您看到的单词“菜单1”和“菜单2”是父组件本身提供的内容；对于作用域槽，父组件只需要提供一组样式(前提是与作用域槽绑定的数据为真)。

在下面的示例中，您可以看到父组件提供了三种样式(flex、ul和Direct Display)，但没有提供任何数据。数据使用子组件插槽本身绑定的名称数组。

父组件：

模板div class='父亲' h3这是父组件/h3！-第一次使用：使用flex显示数据-子模板slot-scope=' user ' div class=' tmpl ' span v-for=' item in user . data“{ item } }/span/div/template/child！-第二种用途：在列表中显示数据-子模板slot-scope=' user ' ul Li v-for=' user '项。数据“{item}}/Li/ul/template/child！-第三种用途：直接显示数据-子模板slot-scope=' user ' { user . data } }/template/child！-第四次使用：不使用其提供的数据，作用域槽恢复为匿名槽- child我是template /child /div/template的子组件；

Template div class=' child这里是子组件/H3//scope slot : data=' data '/slot/div/template export default { data 3360 function(){ return { data :['张山'，' Lisi '，'万武'，'赵丽'，'天齐'，'小巴']}}结果如图所示：

开源代码库

以上三个演示都在GitHub上，需要的话可以去拿。使用非常方便，基于vue-cli。

此处为地址点

最后的

如果这篇文章对你理解槽和范围槽有帮助，请不要吝啬你的赞美。

摘要

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