vue设置标签自定义属性_Vue组件化开发之插槽
插槽为组件提供了强大的扩展能力。我们可以把电脑的主板理解为一个已经封装好的组件，主板上都会预留各种插槽，我们可以往插槽中插入内存条、显卡、声卡等设备。基于同样的思想，Vue在封装组件时，也可以预留插槽，在组件被使用的时候，我们就可以往组件插槽中插上其他内容。
Vue中的插槽用 slot 标签进行占位。这一块我们会讲两部分内容：插槽和作用域插槽。
插槽可理解为，父模板中向子组件内部传递内容。作用域插槽则是，父模板中获取子组件中的数据，组装好内容之后再传递给子组件。下面我们分别详细介绍。
一、插槽
前面说了，插槽是使用 slot 标签在组件中放置占位符。我们定义一个带插槽的组件。
Vue.component('alert-box', {
template: ` Error! `})
组件模板 template 中的 就是我们为 alert-box 组件预留的插槽。alert-box 组件在使用的时候，我们就能往插槽中传递内容。
比如我们传递一段文本
Something bad happened.就会被渲染如下
如果我们传递一个按钮
紧急事件按钮就会被渲染出来
我们也可以传入一堆HTML内容，这些HTML内容都会渲染到 slot 所在的位置。
紧急通知
请同学们赶紧撤离
校长办公室
渲染如下
通过上面这个例子，应该大致明白了插槽的作用。
为了方便使用，Vue提供了给插槽设置默认内容的功能。如果外部不传入内容，则展示默认内容。如果外部传入内容，则展示传入的内容。
Vue.component('alert-box', {
template: ` Error! Something bad happened. `})
默认内容是放在 中间，上面我们就是在 中间放置了一段文本 Something bad happened. 。在使用的时候，如果不传入内容，默认就显示这段文本。
紧急撤离就会被渲染成
上面我们没有给插槽指定名字，实际上Vue会给没有起名字的插槽自动加上一个 default 的名字，等同于
我们也可以为插槽指定其它名字，以方便外部在传入内容的时候，可以指定将内容传递给哪个插槽。这样就更接近电脑主板的思想了，主板上的插槽是分内存条插槽、显卡插槽、声卡插槽 等等，每一个插槽都是有名字的。
我们的组件插槽也可以这样，比如下面代码中我们就指定了头部插槽、尾部插槽。
Vue.component('base-layout', {
template: ` `})这时候在使用的时候，就需要指定内容究竟是传递给哪个插槽，未指定的都会传递给匿名插槽，也就是 default 插槽。
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
如果组件内有多个匿名插槽，那就会传递多份。如果组件内没有匿名插槽，未指定插槽名的内容就会被丢弃。
不过，slot 属性在Vue 2.6.0版本中已经不推荐使用，官方推荐用 v-slot 指令来替代 slot 。v-slot 指令更强大，它不仅可以在这里替代 slot ，还可以替代作用域插槽中的 slot-scope。
我们使用 v-slot 指令改造一下上面的用法。我们通过在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称，来向具名插槽传递内容。
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
这两种使用的效果是一样的。不过我们推荐使用新语法 v-slot 指令。
二、作用域插槽
在学习作用域插槽之前，我们先要明白作用域插槽到底解决了什么问题。
很多时候我们会有这样的需求，需要把子组件中的数据通过父级模板的控制，从而在子组件中渲染出不同的样子。这句话不太好理解，举个具体的例子。
子组件的数据中有一数组
letters = ['A', 'B', 'C', 'D', 'E']我们在某处需要把这个数组渲染成：A - B - C - D - E，而在另一处又需要渲染成列表：
A
B
C
D
E
这时候就可以通过作用域插槽来实现。作用域插槽就是数据由子组件提供，排版由父组件控制。
在介绍作用域插槽之前，先要介绍一下编译作用域。因为正是编译作用域的存在，才使得作用域插槽有存在的必要。
2.1 编译作用域
编译作用域，简单的说就是父子组件都只能取到自己实例中的数据。官方也给出了描述：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
我们通过一个具体的例子来说明其含义
{
{msg}} let vm = new Vue({
el: '#app', components: {
com: {
template: ` data() {
return {
msg: '子组件' } } } }, data: {
msg: '父组件' } })父子组件中在各自的 data 中都定义了msg，并且他们值不一样。那子组件在使用的时候
{
{msg}}插值表达式 { {msg}} 到底取到的是谁的数据？很方便可以验证出 { {msg}} 取到的是父组件的数据。其实在父级模板中是无法直接取到子组件中的数据。这正是因为有编译作用域的存在。同理，在子组件中，也不能直接使用父组件中的数据。当然父子组件中的数据并不是绝对隔离，我们可以通过传值的方式，让他们数据进行交互。
作用域插槽就是要解决在父级模板中取到子组件中数据的问题。
2.2 作用域插槽
现在目标已经明确，我们就是要在父级模板中取到子组件中的数据，所以这里势必要进行数据传递。
先考虑子组件的数据传出，我们可以给 slot 标签设置一个自定义属性 data，然后将数据绑定到自定义属性 data 上，即可将数据传出。
然后在父级模板中接收数据。Vue是通过在 上使用特殊的 slot-scope属性，接收子组件设置在插槽 slot 上的全部自定义属性。
scope 变量就会接收到设置在 slot 上的全部自定义属性，然后我们通过点属性名的方式，就可以取到绑定在属性上面的值。
{
{scope.data}}现在我们来实现前面说的字符数组的渲染。在Vue实例中创建子组件com如下
let vm = new Vue({
el: '#app', components: {
com: {
template: ` `, data() {
return {
letters: ['A', 'B', 'C', 'D', 'E'] } } } }, })可以把它渲染成列表
{
{item}} 也可以渲染成短横线连接的形式
{
{scope.data.join(' - ')}} 我们就可以看到相同的数据展示成不同的形式。
现在我们再完善一下作用域插槽的定义：子组件向父组件传递数据，但父组件通过传递插槽内容来控制数据在子组件中展现方式。
前面说了，slot-scope在 Vue 2.6.0中不再推荐使用，应该使用 v-slot 指令来替代，上面渲染的代码就可以改造如下
{
{item}} {
{scope.data.join(' - ')}} 总结
本章我们主要介绍了插槽和作用域插槽。插槽部分讲了插槽的使用、插槽默认值、具名插槽。作用域插槽部分主要讲了编译作用域和作用域插槽的使用。
这一块内容是Vue中的高级部分，运用恰当，威力极大。