7.8使用slot分发内容

7.8.1 什么是slot(插槽)

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

7.8.2 编译的作用域

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

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

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

域简单地说是：
父组件模板的内容在父组件作用域内编译；
子组件模板的内容在子组件作用域内编译。
插槽的简单介绍和作用域

7.8.3 插槽的用法

父组件的内容与子组件相混合，从而弥补了视图的不足
混合父组件的内容与子组件自己的模板
代码效果展示

单个插槽：

<div id="app">
  <my-component>
    <p>我是父组件的内容</p>
  </my-component>

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

具名插槽：

Vue.component('name-component',{
  template: '<div>\
    <div class="header">\n' +
      ' <slot name="header">\n' +
         ' \n' +
      ' </slot>\n' +
    '</div>\n' +
    '<div class="contatiner">\n' +
      ' <slot>\n' +
        ' \n' +
      ' </slot>\n' +
    '</div>\n' +
    '<div class="footer">\n' +
      ' <slot name="footer">\n' +
        '\n' +
    ' </slot> \n' +
    '</div>'+
  ' </div>'
})

7.8.4 作用域插槽

作用域插槽是一种特殊的slot，使用一个可以复用的模板来替换已经渲染的元素
——从子组件获取数据
====template模板是不会被渲染的
代码展示

<div id="app">
  <my-component>
    <!-- <template slot="abc" slot-scope="props">
      {{props.text}}
      {{props.msg}}
    </template> -->   两种写法都可以
    <p slot="abc" slot-scope="props">
      {{props.text}}
      {{props.msg}}
    </p>
  </my-component>
</div>

<script>
Vue.component('my-component', {
  template: '<div>\
    <slot name="abc" text="我是子组件的数据" msg="nice">\
    </slot>\
  </div>'
})
<script>

7.8.5 访问slot

通过this.$slots.(NAME)
代码展示

  mounted: function(){
    let header = this.$slots.header
    let text = header[0].elm.innerText
    let html = header[0].elm.innerHTML
    console.log(header)
    console.log(text)
    console.log(html)
  }

7.9 组件高级用法–动态组件

VUE给我们提供 了一个元素叫component
作用是： 用来动态的挂载不同的组件
实现：使用is特性来进行实现的

<div id="app">
  <component :is="thisView"></component>
  <button @click="handleView('A')">第一句</button>
  <button @click="handleView('B')">第二句</button>
  <button @click="handleView('C')">第三句</button>
  <button @click="handleView('D')">第四句</button>
</div>

<script>
//需求：点击不同按钮，切换不同的视图
let app = new Vue({
  el: '#app',
  data: {
    thisView: 'compA'
  },
  methods: {
    handleView: function(tag){
      this.thisView = 'comp' + tag
    }
  },
  components: {
    'compA': {
      template: '<div>锄禾日当午</div>'
    },
    'compB': {
      template: '<div>汗滴禾下锄</div>'
    },
    'compC': {
      template: '<div>谁知盘中餐</div>'
    },
    'compD': {
      template: '<div>粒粒皆辛苦</div>'
    },
  }
})
</script>

代码展示