Vue: slot-scoped作用域插槽的使用

Vue学习篇(二)：slot-scoped作用域插槽的使用

---

    作用域插槽是slot一个比较难理解的点，而且官方文档说的又有点不清晰。这里，我们用一句话对其做一个总结，然后在后续案例中来体会：
父组件替换插槽标签，但是内容由子组件来提供

---

父组件中通过slot插槽控制子组件要渲染内容，组件1渲染姓名与年龄，组件2渲染姓名与爱好

<template>
  <div class="hello">
    <!-- 通过 :data 绑定子组件的中的list数据， data不是固定的，可以随意取名 -->
    <slot :data="list"></slot>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      list: [
        {name: '小明', age: '18', hobby: '打篮球'},
        {name: '小张', age: '10', hobby: '谈恋爱'},
        {name: '小马', age: '28', hobby: '敲代码'}
      ]
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- 自定义组件1 -->
    <HelloWorld>
      <!-- 通过slot-scope拿到子组件传递过来的list -->
      <template slot-scope="slot">
        <!-- 注意这里要使用slot.data去拿取子组件传递过来的数据 -->
        <ul><li v-for="item in slot.data" :key="item.index">姓名:{{item.name}} — 年龄:{{item.age}}</li></ul>
      </template>
    </HelloWorld>

    <!-- 自定义组件2 -->
    <HelloWorld>
      <template slot-scope="slot">
        <ul><li v-for="item in slot.data" :key="item.index">姓名:{{item.name}} : 爱好:{{item.hobby}}</li></ul>
      </template>
    </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

子组件通过 :data将数据传递给父组件，父组件通过slot-scope来接收。

    理解了slot-scope的特性，那他具体有什么应用场景呢，比如说数据的显示风格让用户自己定义，一个组件在要求下显示不同的数据，就像上边我组件1间隔之间用的‘ — ’，在组件2中用的可以是其他的字符‘ : ’, 子组件中负责处理传递的进去的数据，父组件只要负责显示就行了，这样slot-scope就有大作用了。