组件化高级

插槽

什么是插槽

生活中有很多地方都有用到插槽，比如电脑的USB插槽，插板上的电源插槽，目的是让我们原来的设备具备更多的扩展性

组件的插槽

为了让我们封装的组件更加具有扩展性。
让使用者可以决定内部的一些内容到底展示什么。

组件插槽的作用

同一个组件中显示的内容会有些不同，例如下图，在同一位置的组件，显示的内容不同，这时只能定义三个组件来完成吗？不必要，我们可以使用插槽slot来预留空间，然后再往slot中填充内容

slot.png

插槽的使用

简单使用

<div id="app">
  <cpn></cpn>
  <cpn><span>我是插槽</span></cpn>
  <cpn><i>我是二号插槽</i></cpn>
  <cpn></cpn>
</div>

<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是子组件,哈哈哈</p>
    <slot></slot>
  </div>
</template>

插槽还可以设置默认值，即上面代码中1和4cpn中没有替换元素，就会使用默认值

<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>我是子组件,哈哈哈</p>
    <slot><button>按钮</button></slot>
  </div>
</template>

当有多个值同时放入组件中，那么会一起作为替换元素

<div id="app">
  <cpn></cpn>
  <cpn><span>我是插槽</span></cpn>
  <cpn><i>我是二号插槽</i></cpn>
  <cpn>
    <i>我是组件</i>
    <div>哈哈哈</div>
    <span>我是替换元素</span>
  </cpn>
</div>

具名插槽的使用

当组件中有多个插槽时，这时需要给每个插槽名字，以便相对应的替换元素，这就是具名插槽

给slot附加name属性，然后在使用时指定slot

<div id="app">
  <cpn>
    <button slot="left">返回</button>
    <span slot="center">标题</span>
    <button slot="right">前进</button>
  </cpn>
</div>

<template id="cpn">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>

编译作用域的概念

在Vue中，组件有自己的作用域，如下面代码中，组件模版中的show使用的是组件中定义的isShow，Vue中使用的是Vue实例中的isShow

官方：父组件模版的所有东西都会在父级作用域内编译；子组件模版的所有东西都会在子级作用域内编译

<div id="app">
  <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是组件</h2>
    <p>哈哈哈哈哈哈哈哈哈</p>
    <button v-show="isShow">按钮</button>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "你好啊！",
      isShow: true
    },
    components: {
      cpn: {
        template: '#cpn',
        data() {
          return {
            isShow: false
          }
        }
      }
    }
  })
</script>

作用域插槽

一句话总结：父组件替换插槽的标签，但是内容由子组件来提供

目的是让子组件中的数据展示的样式不一样，子组件中的数组，默认显示是列表

<template id="cpn">
  <div>
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>

:data="pLanguages"是为了让父组件模版能够得到子组件中的数据，对其显示方式进行修改。如下，slot-scope="slot"就可以得到data。join（）方法可以让数组显示成字符串参数是分隔符。

  <cpn>
    <template slot-scope="slot">
      <span>{{slot.data.join(' - ')}}</span>
    </template>
  </cpn>
  <cpn>
    <template slot-scope="slot">
      <span>{{slot.data.join(' * ')}}</span>
    </template>
  </cpn>