slot插槽的用法

什么是slot(插槽)

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过
程被称为 内容分发.Vue.js 实现了一个内容分发 API，使用特殊的 ‘slot’ 元素作为原始内容的
插槽。

编译的作用域

在深入内容分发 API 之前，我们先明确内容在哪个作用域里编译。假定模板为：

<child-component>
{{ message }}
</child-component>

message 应该绑定到父组件的数据，还是绑定到子组件的数据？
答案是父组件。

组件作用域简单地说是：

• 父组件模板的内容在父组件作用域内编译；
• 子组件模板的内容在子组件作用域内编译。

插槽的用法:

• 父组件的内容与子组件相混合，从而弥补了视图的不足
• 混合父组件的内容与子组件自己的模板

单个插槽

<div id="app">                   
    <child-component>            
      <p>来自父组件的问候</p>  // 这看似是在子组件中写的内容，但其实这是属于父组件的作用域
    </child-component>         // 也就是说，其实这个 p元素 ，是父组件中的内容  
</div>                          

Vue.component('child-component', {
  template: `<div>
     <slot></slot>
  </div>`
})

var app = new Vue({
  el: '#app',
  data: {}
})

在子组件中使用 slot 做一个插槽，父组件中的内容就可以插到这个插槽里边。

具名插槽

具名插槽，就是有名字的插槽。
如果父组件中有很多内容都要放到子组件中，如果子组件中只有一个 slot（插槽）的话，那所有内容都挤到一起，显然是不合理的。所以我们需要多个 slot（插槽），并给每个 slot（插槽）起个名字，那么就能很方便的讲指定内容放到指定 slot（插槽）中。

 <div id="app">
        具名插槽：
        <name-component>
            <h3 slot="header">我是标题</h3>
            <p>我是正文内容</p>
            <p>正文内容有两段</p>
            <p slot="footer">我是底部信息</p>
        </name-component>
    </div>
    <!-- slot 将 p 标签的内容作为插值替换到 slot 标签里面 -->
    <script>
        Vue.component('my-component', {
            template: '<div>
                            <slot>
                                如果父组件没有插入内容,我就作为默认出现\
                            </slot>
                        </div>'
        })
        Vue.component('name-component', {
            template: ' <div>
            <div class="header">
              <slot name="header"> </slot>
            </div>

            <div class="contatiner">
              <slot></slot>
            </div>

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

            </div>'
        })
        var app = new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>

作用域插槽

上面说的单个插槽和具名插槽，都是父组件向子组件传递数据。那么，父组件要从子组件中获取数据，怎么办呢？同样，使用 slot 就可以办到。

<div id="app">
<my-component>
    <!-- template 模板是不会被渲染的 template里面的内容会渲染  -->
     <template slot="a" slot-scope="prop">
        {{prop.text}} <br>
        {{prop.ss}} 
        <!-- {{prop.name}}//拿不到name属性 -->
    </template> 
    <!-- 2.50版本之前只能在 template 上使用作用域插值
    2.50 以后任意标签都可以 -->
    <!-- <p slot="a" slot-scope="prop">
            {{prop.text}} <br>
            {{prop.ss}} 
    </p> -->
</my-component>
</div>



   Vue.component('my-component', {
       template:'<div>\
       <slot name="a" text="我是子组件的数据" ss="ddfdf"></slot></div>'
   })
    var app = new Vue({
      el:'#app',
      data:{

      }  
    })

子组件中的 text，就是子组件中的数据。父组件是怎么获取的？在 template 上写了 slot-scope 属性，scope 有“范围”的意思，也就是 slot 的范围，也就是“作用域插槽”了

访问插槽

访问插槽，要用到 this.$slots

 <div id="app">
        具名插槽：
        <name-component>
            <h3 slot="header">我是标题</h3>
            <p>我是正文内容</p>
            <p>正文内容有两段</p>
            <p slot="footer">我是底部信息</p>
        </name-component>
    </div>


Vue.component('my-component', {
template: '<div>
    <slot>
        如果父组件没有插入内容,我就作为默认出现\
    </slot>
</div>'
})
Vue.component('name-component', {
template: ' <div>
    <div class="header">
        <slot name="header"> </slot>
    </div>

    <div class="contatiner">
        <slot></slot>
    </div>

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

</div>'
})
mounted:function() {
//访问插槽
  var header = this.$slots.header; // 访问名字为 header 的插槽
  var text = header[0].elm.innerText  // header 中的元素的文本
  var html = header[0].elm.innerHTML
  console.log(header)
  console.log(text)
  console.log(html)
  }
 })
var app = new Vue({
  el: '#app',
  data: {

  }
})