vue 插槽slot的理解和使用方法

參考 https://segmentfault.com/a/1190000012996217?utm_source=tag-newest

一、前言

Vue的slot插槽，簡單理解就是，在子組件內占坑，在父組件里填坑。

二、slot的作用

Q: 假如父組件需要在子組件內放一些DOM元素，那么這些DOM是顯示呢還是不顯示呢？

默認情況下是不會顯示的，如下圖所示，頁面並沒有顯示父組件增加的

元素內容。那么我執意要加DOM元素到子組件上該怎么實現呢？這就用到了slot插槽，使用slot這個標簽可以將父組件放在子組件的內容，放到它想顯示的地方

//錯誤寫法：如果不用插槽形式，子組件的 div等內容是不會顯示的。
<template>
  <div class="parent">
    <Child>
      <p>這里的文字不顯示的。。。</p>
    </Child>
    <div class="now">1234567/98</div>
  </div>
</template>

三、個人理解及插槽的使用場景

一個復用的組件在不同的地方也些許變化，如果去重寫子組件是很不明智的一件事，當然也可以將不同之處都寫在子組件里，然后通過父組件傳來的標識進行選擇顯示。
其實質是對子組件的擴展，通過slot插槽向組件內部指定位置傳遞內容，即將 元素作為承載分發內容的出口；

具名插槽

//子組件  Child.vue
<template>
    <div class="child">
        <slot name='header'></slot>
        child內容
        <slot name='footer'></slot>
    </div>
</template>

在子組件里，用 占位，並用name來區分。此處的name相當於類名class。

//父組件  parent.vue
<template>
  <div class="parent">
    <Child>
      <h1 slot="header" class="h1">header</h1>
      <h1 slot="footer" class="h1">footer</h1>
    </Child>
    <div class="now">1234567/98</div>
  </div>
</template>

在父組件里，引入了子組件 , 在子組件中，可以插入div等標簽，定義上對應的slot=“name”屬性，來使用。

總結：slot插槽讓我們在原有模版的基礎上，定制更加多樣化的組件。

四、父子組件通信----解構slot-scope

//子組件 child.vue
<template>
    <div class="child">
        <slot name="header" :users="users"></slot>
        <slot name="footer" ></slot>
    </div>
</template>
<script>
export default {
    data(){
        return {
            users: [
            {name: 'Jack', sex: 'boy'},
            {name: 'Jone', sex: 'girl'},
            {name: 'Tom', sex: 'boy'}
            ]
           
        }
    }
}
</script>

在子組件中插槽中通過 :users綁定了數據。

<template slot-scope="prop">
  <div id="app">
    <Child>
      <div slot="header" slot-scope="scope" >
        <span>{{scope.users}} </span>
      </div>
      <h1 slot="footer">footer</h1>
    </Child>
  </div>
</template>

父組件可以通過slot-scope="scope"來取得子組件作用域插槽 。 通過scope.users獲取到所需數據。