vue中slot的使用

slot的作用：对组件的一个扩展，当组件中的某一项需要进行单独定义时，通过slot插槽向组件内部指定位置传递内容

例如：’领取优惠票‘，在未登陆状态时显示这个标题，进入登陆状态或者其页面时标题消失，‘星期一 ’标题不管在哪个页面都进行显示。所以这个‘领取优惠票’是需要进行单独定义在某一个组件中

<template>
  <div id="app">
    <children>
      <div slot="header">
        <ul>
          <li>领取优惠卷</li>
        </ul>
      </div>
    </children>
  </div>
</template>
<script>
  var Child = {
    template: '<div>这是子组件<slot name="header"></slot></div>'
   }
  export default {
    name: 'hello',
    components: {
      children: Child
    }
  }
</script>

渲染后的结果：

这是子组件，领取优惠卷