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