Vue 插槽slot

Vue 插槽

Vue实现了一套内容分发的API，将作为承载内容分发的出口。
在总结slot的内容之前，先来看一下编译的作用域的内容。

（1）编译的作用域

<div id="app">
    <test>
       {{message}}
    test>
div>

如上代码所示，是我们自己定义的一个组件。这里的message就是一个slot，它绑定的是父组件的数据，而不是组件的数据。

父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译：

<div id="app">
    <test v-show="show111">test>
div>
<script>
    Vue.component('test', {
        template: '
子组件！
'
    });
    var app = new Vue({
        el: "#app",
        data:{
            show111:false
        }
    })
script>

上面代码中，show111绑定的是父组件的数据，是在父组件的作用域内编译。如果想绑定在子组件上：

<div id="app">
    <test>test>
div>
<script>
    Vue.component('test', {
        data:function(){
            return {
                show111:false
            }
        },
        template: '
子组件！
'
    });
    var app = new Vue({
        el: "#app",
    })
script>

而我们接下来要总结的slot的内容，它的作用域是在父组件上的。

（2）未命名插槽

在子组件内部使用特殊的元素就可以为子组件开启一个插槽。在父组件模板里，插入在子组件标签内的所有内容将代替子组件模板中的标签及它的内容：

<div id="app">
    <test>你好！test>
div>
<script>
    Vue.component('test', {
        template: '
'
    });
    var app = new Vue({
        el: "#app",
    })
script>

在渲染过程中，元素会被替换为“你好！”
渲染结果为：

<div id="app">
      <div>你好！div>
div>

还可以设置默认出现的内容：

<div id="app">
    <test>test>
div>
<script>
    Vue.component('test', {
        template: '
如果父组件没有插入内容，我将默认出现！
'
    });
    var app = new Vue({
        el: "#app",
    })
script>

在父组件模板中没有插入内容，因此中的默认内容将会出现，渲染结果为：

<div id="app">
      <div><p>如果父组件没有插入内容，我将默认出现！p>div>
div>

插槽内可以包含代码：

 <test><span>你好：span>test>

渲染结果为：

<div id="app">
      <div><span>你好：span>div>
div>

如果组件在定义的时候没有包含一个元素，传入组件的内容都会被抛弃：

<div id="app">
    <test><span>你好：span>test>
div>
<script>
    Vue.component('test', {
        template: '
'
    });
    var app = new Vue({
        el: "#app",
    })
script>

渲染结果为：

<div id="app">
      <div>div>
div>

（3）具名插槽

元素有一个特性：name。这个特性可以用来定义具名插槽。
在向具名插槽提供内容的时候，可以在父组件的