写在前面
在vue中，关于插槽的文档说明很短，语言很讲究，再加上与methods、data、computed等常见选项的使用频率、使用前后有差异，所以第一次接触插槽的开发者会说：“算了，以后学习也没关系
其实，插槽的概念很简单。 以下，分为三个部分来说。 这一部分也是按照vue说明文件的顺序写的。
在进入三部分之前，请还没有接触插槽的同学对什么是插槽有一个简单的概念。 插槽或slot是组件的HTML模板。 此模板不可见，其显示方式取决于父组件。 实际上，一个slot最中心的两个问题在这里被点击是显示不显示和如何显示。
因为插槽是一个模板，所以从模板类型的角度来看，任何组件实际上都可以分为非插槽模板和插槽模板两类。 所谓非槽模板，是指html模板，是指“div、span、ul、table”。 插件本身控制非插槽模板的显示和隐藏以及如何显示； 插槽模板是一个slot，是一个空shell，因为其可见性以及最终显示的html模板由父组件控制。 但是，插槽的显示位置由子组件自身决定，slot写在组件的template的哪个块中，从父组件传递的模板将来显示在哪个块中？
单个插槽|默认插槽|匿名插槽
首先是单一插槽。 虽然单个插槽是对vue的正式称呼，但实际上也可以称为默认插槽，或者与命名插槽相对，称为匿名插槽。 因为不需要设置name属性。
一个插槽可以位于组件的任意位置，但正如其名称所示，一个组件只能有一个这样的插槽。 与此相对，命名的插槽也可以是多个，只要名称(name属性)不同即可。
举个例子吧。
父程序集：
这里是父组件菜单1
菜单2
菜单3
菜单4
菜单5
菜单6
子组件：
这里是子组件。 在此示例中，html模板写在父组件的平静耳机中，因此子组件的匿名插槽模板如下所示： 也就是说，子组件的匿名插槽是用于以下模板的：
菜单1
菜单2
菜单3
菜单4
菜单5
菜单6
最终的渲染结果如下。
注：所有demo都已设置好样式，以便于观察。 其中，父组件用灰色背景填充，子组件用淡蓝色填充。
命名插槽
匿名插槽没有name属性，因此是匿名插槽。 在中，如果将name属性添加到插槽中，则它将成为命名的插槽。 命名的插槽可以在一个组件中显示n次。 出现在不同的位置。 以下示例显示了具有两个命名插槽和一个插槽的组件，其中三个插槽的显示方式与父组件的css样式相同，但内容略有不同。
父程序集：
这里是父组件菜单1
菜单2
菜单3
菜单4
菜单5
菜单6
菜单-1
菜单-2
菜单-3
菜单-4
菜单-5
菜单-6
菜单-1
菜单-2
菜单-3
菜单-4
菜单-5
菜单-6
子组件：
//命名插槽
这里是子组件//命名插槽
//匿名插槽
显示结果如下。
可以看到，父组件通过html模板的slot属性与命名插槽相关联。 缺省情况下，没有slot属性的html模板与匿名插槽相关联。
作用域插槽|带数据的插槽
最后，是我们的作用域插槽。 这个有点难懂。 虽然官方称之为作用域插槽，但实际上，与前面的两个插槽相比，它可以称为带数据的插槽。 至于是什么意思，前面的两个都写在组件的template中
匿名插槽
命名插槽
但是，在作用域插槽中，必须将数据绑定到slot之上。 也就是说，你大致必须写如下。
导出默认{
data :函数(
return {
data: ['zhangsan '，' lisi '，' wanwu '，' zhaoliu '，' tianqi '，' xiaoba']
}
(，
}
如上所述，它不出现在插槽的末尾是因为它看到的是父组件是否在child下写了模板。 如下所示。
html模板
写了。 插槽必须在浏览器中显示某些内容。 东西是html应有的样子。 不写。 插槽是空壳。 没什么。 确定，如果存在html模板，则表示父组件在子组件中插入模板时，要插入什么样的样式，这是父组件的h
tml+css共同决定，但是这套样式里面的内容呢？正因为作用域插槽绑定了一套数据，父组件可以拿来用。于是，情况就变成了这样：样式父组件说了算，但内容可以显示子组件插槽绑定的。
我们再来对比，作用域插槽和单个插槽和具名插槽的区别，因为单个插槽和具名插槽不绑定数据，所以父组件是提供的模板要既包括样式由包括内容的，上面的例子中，你看到的文字，“菜单1”，“菜单2”都是父组件自己提供的内容；而作用域插槽，父组件只需要提供一套样式(在确实用作用域插槽绑定的数据的前提下)。
下面的例子，你就能看到，父组件提供了三种样式(分别是flex、ul、直接显示)，都没有提供数据，数据使用的都是子组件插槽自己绑定的那个人名数组。
父组件：
这里是父组件{{item}}
{{item}}
{{user.data}}
我就是模板
子组件：
这里是子组件// 作用域插槽
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}
结果如图所示：
github
以上三个demo就放在GitHub了，有需要的可以去取。使用非常方便，是基于vue-cli搭建工程。
地址点这里
最后
如果本文对你理解slot和scope-slot有帮助，请不要吝啬手中的点赞哟。 编程贵在实践，赶紧行动起来吧！
关于找一找教程网
本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。
[深入理解vue中的slot与slot-scope]http://www.zyiz.net/tech/detail-137181.html