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>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。