Vue一个案例引发「内容分发slot」的最全总结 (5)

画风一转，下面我们把它变成一个消息通知列表，可以看到每个文章的点赞数量。

<template>
  <div class="tirp-wrapper">
    <list title="消息通知" :list="list">
      <div slot-scope="props">
        <span>
        {{props.item.title}}
      </span>
      <el-badge :value="props.item.value" :max="99">
        <el-button size="mini">
          <i class="fa fa-thumbs-o-up"></i>
        </el-button>
      </el-badge>
      </div>
    </list>
  </div>
</template>
<script>
import List from "./List";
export default {
  name: "Trip",
  components: { List },
  data() {
    return {
      list: [{
          title: "Vue一个案例引发「动画」的使用总结",
          value: 200
        },{
          title: "Vue一个案例引发的递归组件的使用",
          value: 20
        },{
          title: "Vue一个案例引发的动态组件与全局事件绑定总结",
          value: 50
        }]
    };
  }
};
</script>

可以看到，不管我们如何的去修改数据结构也好，添加不同的内容也罢，我们都可以完美的完成，而且不用修改我们的子组件，只需要在外部调用时填充我们需要的内容即可。

有没有感受到作用于插槽的强大与灵活。

如果用一句话来描述作用域插槽的话：它可以让我们在父组件中访问子组件的数据，就像利用 props 属性让子组件访问到父组件的数据一样。

总结

插槽是一个重要且非常强大的功能，它可以让我们的组件具有非常 的灵活性与可复用性，而作用域插槽更加的强化了这些特性。

作用域插槽是一个不太好理解的地方，希望通过本篇文章能够让你解惑。