Vue01组件化实践-03 插槽 slot

组件化 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>