17. 插槽

插槽内容

组件标签中间是可以塞内容进去的，而这个内容就是slot，插槽。只有启动了插槽才能显示标签内容——

<component1>slot内容{{message}}</component1>

var component1 = {
            template: `
            <div>
            听说插槽
            <slot>没有solt内容会显示这个</slot>
            会放在这上面哦    
            </div>
            `
        }
 var vue = new Vue({
            el: ".app",
            data: {
                message: "solt message"
            },
            components: {
                component1,
                component2
            }
        })

编译作用域

当你想在一个插槽内使用数据的时候，请注意拿到的数据是父元素的数据.例如上例中，拿到的message数据是从data中拿到的。

后背内容

模板中的<slot></slot>之间如果写内容的话，在slot没有内容的时候会显示出来——

var component1 = {
            template: `
            <div>
            听说插槽
            <slot>没有solt内容会显示这个</slot>
            会放在这上面哦    
            </div>
            `
        }

具名插槽

插槽不一定只有一个，一个组件里面可以有多个插槽，根据【名称】决定内容到底在哪里渲染：

 <div class="line"></div>
        <component2 v-slot:line1>内容</component2>
        <div class="line"></div>
        <component2 v-slot:line2>内容</component2>
        <div class="line"></div>
        <component2 v-slot:line3>内容</component2>
        <div class="line"></div>


var component2 = {
            template: `
            <div>
                <div>
                    title
                <slot name="line1"></slot>
                </div>

                <div>
                    content
                <slot name="line2"></slot>
                </div>

                <div>
                    bottom
                <slot name="line3" v-bind:title="title" >{{title}}</slot>
                </div>

            </div>
            `,
            data: function () {
                return {
                    title: "通过bind方法传递参数"
                }
            }
        }

如上，标签上使用v-slot:name指定插槽的名称，之后内容就会渲染在插槽中。

 <slot name="line2"></slot>

不带名称的插槽会带有【default】这个名字

作用域插槽

作用域插槽可以获取子组件的数据，从而渲染到对应的插槽上：

 <component4>
            <template v-slot:other="otherValue">
                {{ otherValue}}
            </template>
        </component4>

注意，作用域插槽需要用template标签包裹，其参数otherValue是other插槽绑定的属性——

 var component4 = {
            data: function () {
                return {
                    slotProps: "aaa",
                    otherP: "1234"
                }
            },
            template: `
            <div>
                <ul>
                    <slot :slotProps=slotProps ></slot> 
                    <slot name="other"   :otherValue=otherP></slot>
                </ul>
            </div>
            `
        }

上例中模板定义了两个插，一个默认的插槽，一个名为other的插槽，其中other还绑定了参数otherP，这个属性名为otherValue，可以在标签中进行调用。

独占默认插槽的缩写语法

只有slot中只有默认slot的时候，才不需要template标签：

<current-user v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

甚至default都可以不要：

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

另外缩写和普通写法不能混用，只要出现第二个slot就请把他们恢复成原来的样子。

解构插槽

<component4>
            <template v-slot:other="otherValue">
                {{ otherValue}}
            </template>
        </component4>

如果输出一次值，你就会发现结果是这样的：

{ "otherValue": "1234" }

所以这玩儿意解构一下会更加简洁

<component4>
            <template v-slot:other="{otherValue}">
                {{ otherValue}}
            </template>
        </component4>

// 结果
1234
```

### 动态插槽名
```
<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>
```
使用循环输出也不是梦了。

### 具名插槽的缩写
```
<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>
```
#号代替了原来的v-slot:。