在Vue中使用插槽（slot）

什么是插槽：

顾名思义，一个萝卜一个坑。子组件创建的标签插入的内容不会在浏览器显示。这时需要用到Vue新的语法slot。

Vue为什么要用插槽：

组件标签是组件定义好的内容，当我们想在组件标签内放一些东西的时候。是不具有作用的。他不会显示。

<foo>
    <div>hello</div>
</foo>

浏览器中不会显示hello。dom结构中也没有div

Vue.component('foo', {
    template: `<div>
                <p>dll</p>                       
                </div>`
})
var vm = new Vue({
    el: '#app',
})

显示结果为dll。明显，自定义组件标签foo里面添加的div内容hello不会被展示。

当我们使用插槽后

Vue.component('foo', {
    template: `<div>
        <slot></slot> //添加插槽标签
        <p>dll</p>                       
        </div>`
})
var vm = new Vue({
    el: '#app',
})

这是插槽的简单应用。

slot的特点：

扫描二维码关注公众号，回复： 3502664 查看本文章

插槽的位子由组件标签觉定。插槽的内容由父组件控制。

插槽可以写默认内容。当子组件没有内容的时候，就会显示默认内容

插槽分为具名插槽和匿名插槽（单个插槽不需要写名name）。需要多个插槽的时候需要使用具名插槽，实现一对一的操作。

具名插槽的使用：以下代码我想实现的是head和body分别插入子组件的两个插槽里。但浏览器结果并不是这样

以上说明。子组件的内容会作为一组全部插入一个插槽中。

所以现在我们需要使用具名插槽。给每一一个对应的标签和插槽一一对应。这样就实现了一个萝卜一个坑。

难点：作用域插槽（非常实用）

首先我们在子组件定义了一个插槽。插槽的内容为遍历一个数组添加到对应的标签上（标签是啥用父组件决定）

怎么定义作用域插槽：

在子组件标签中添加template模板标签。填写slot-scope=“xxx”（xxx为接收子组件传递过来的数据内容。自定义形参）

在模板标签中填写需要展示的标签。