vue----slot插槽的使用

vue官方文档在slot这部分讲解的并不是很详细，这里用更通俗的语言进行描述。

根据官档的标题来开始吧

插槽内容

假如父组件的代码如下（children为注册的子组件）：

<div id='app'>

    <div>这里是父组件</div>

    <children>

        <div class=‘toslot’>这里是插槽的内容，位于子组件内部</div>

    </children>

</div>

<script>

new Vue({

    el: '#app',

    components: {

        children: {

            template: '<div>这里是子组件，注意：没有加入slot标签哦！</div>'

        }

    }

})

</script>

渲染结果：

 

<div id='app'>

    <div>这里是父组件</div>

    <div>这里是子组件，注意：没有加入slot标签哦！</div>

</div>

上面的代码实际效果如下：

这里是父组件

这里是子组件，注意：没有假如slot标签哦！

是不是少了东西，对，children中<div class='toslot'>标签内容没有渲染出来，why?

这里我们就要用到插槽了，插槽（slot）是用来将父组件中添加在子组件标签中的内容（这里指children中<div class='toslot'>）插入到子组件中，使其能够渲染出来的的工具。

如果能理解那么我们继续，不理解也得往下看

现在对上面的代码进行修改

 

<div id='app'>

    <div>这里是父组件</div>

    <children>

        <div>这里是插槽的内容，位于子组件内部</div>

    </children>

</div>



<script>

new Vue({

    el: '#app',

    components: {

        children: {

            template: '<div>

                    <slot></slot>

                    这里是子组件，注意：这里加入slot标签哦！

                   </div>'

        }

    }

})

</script>

渲染结果：

 

<div id='app'>

    <div>这里是父组件</div>

    <div>

        <div>这里是插槽的内容，位于子组件内部</div>

        这里是子组件，注意：这里加入slot标签哦！

    </div>

</div>

 

可以看到，子组件中slot标签被渲染为<div>这里是插槽的内容，位于子组件内部</div>

上面的代码实际效果如下：

这里是父组件

这里是插槽的内容，位于子组件内部

这里是子组件，注意：没有假如slot标签哦！

可以看到，<div class='toslot'>内容被渲染出来了，所以，slot用法很简单，只要在子组件中加入<slot></slot>标签，那么父组件里添加到子组件标签中所有的内容都会取代<slot></slot>区域。

注意哦，是所有内容，比如我们在添加些内容：

 

<div id='app'>

<div>这里是父组件</div>

<children>

<div>header</div>

<div>main</div>

<div>footer</div>

copyright

</children>

</div>

 

<script>

new Vue({

el: '#app',

components: {

children: {

template: '<div><slot></slot>这里是子组件，注意：这里加入slot标签哦！</div>'

}

}

})

</script>

所有我们在子组件标签中添加的内容都会被渲染出来：

 

这里是父组件

header

main

footer

copyright 这里是子组件，注意：没有加入slot标签哦！

具名插槽

具名插槽更能说明它为啥叫插槽，比如我们修改一下上面的例子，我们想要将三个div插入到三个不同的位置：

 

<div id='app'>

<div>这里是父组件</div>

<children>

<div slot='header'>header</div>

<div slot='main'>main</div>

<div slot='footer'>footer</div>

</children>

</div>

 

<script>

new Vue({

el: '#app',

components: {

children: {

template: '<div> 1

                         <slot name="header"></slot>

                         2

                         <slot name="main"></slot>

                         3

                         <slot name="footer"></slot>

                        这里是子组件，注意：3个slot标签哦！

                  </div>'

}

}

})

</script>

 

渲染结果如下：

 

这里是父组件

1

header

2

main

3

footer

这里是子组件，注意：3个slot标签哦！

为父组件中插入的DOM元素添加slot='slotname'，为子组件中的slot标签添加name='slotname'，这样就可以一一对应的将内容添加到指定位置，就像各种硬件的接口只能接特定的接头一样，接头和接口缺少任何一个都不能顺利的连接，所以那两个属性一个都不能少。当然，对于文本节点和没有添加slot='slotname'的元素，还想要的话就添加一个通用接口<slot></slot>将它们全部接收吧。