27.Vue slot內容分發-解構

Vue slot的使用參考：26.Vue slot內容分發

什麼是slot分發解構：
官方定義：如果一個 JavaScript 表達式在一個函數定義的參數位置有效，那麼這個表達式實際上就可以被 slot-scope 接受

直觀翻譯：當數據在子組件內，slot的分發內容（DOM）是父組（外部組件）件傳入，就可以使用slot-scope

案例：

1. 子組件 (slot定義)

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list">
        <slot :item="item"></slot>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        list: [
          {name: 'name1', title: 'title1'},
          {name: 'name2', title: 'title2'}
        ]
      }
    }
  }
</script>

2. 父組件（外部組件使用slot）

<template>
  <div>
      <pagec>
      <!-- 這裏不一定是template，只是定義成template不會渲染成dom -->
        <template slot-scope="{item}"> 
          <div style="border: 1px solid red;">
            姓名：<span>{{item.name}}</span>，標題：{{item.title}}
          </div>
        </template>
      </pagec>
  </div>
</template>
<script>
  //導入組件
  import pagec from './pagec'
  export default {
    components: {
        pagec
    }
  }
</script>

結果：

image.png