組件化 slot 插槽

demo github地址：feature/slot 分支

直接上代碼體會插槽的使用吧

<!-- parent -->
<template>
  <div class="home">
    <p>Home</p>
    <i>{{msg}}</i>
    <Child>
      <p>這是傳給第一個插槽的內容</p>
      <p slot="second">這是傳給第二個插槽的內容</p>
      <hr/>
      <template v-slot:second="slotProps">
        {{ slotProps.slotObj }}
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "../components/Child"
export default {
  name: 'Home',
  components: {
    Child
  },
  data() {
    return {
      msg: '父組件的msg在父組件的作用域'
    }
  }
}
</script>

<!-- child -->
<template>
  <div>
    <p>Child</p>
    <i>{{msg}}</i>
    <p>第一個插槽(default)</p>
    <slot></slot>
    <p>第二個插槽(name="second")</p>
    <slot name="second" :slotObj="slotObj"></slot>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: '子組件的msg在子組件的作用域',
        slotObj: {
          firstName: '張三',
          lastName: '尼古拉斯'
        }
      }
    }
  };
</script>