vue - 作用域插槽

作用域插槽:可从子组件获取数据的可复用的插槽
作用域是子组件本身绑定的数据
场景:典型代表性 - 列表组件 【child 组件做列表的循环(ul),列表中的每一项如何显示并不关心,显示由外部决定,外部组件调用chlid,需要向子组件传递slot(li),告知子组件如何显示列表的每一项】【既可以复用子组件的slot,又可以使slot内容不一致】

  // child.vue
  <template>
    <!-- <div v-for="user in users"> ... </div> -->
    <ul>
       <slot v-for="user in users" :user="user" name="user"></slot>
    </ul>
  </template>
  <script>
    export default {
      props: {
        users: { // 也可内部data自定义
            type: Array,
             default () { return []}
        }
      }
    }
  </script>

  // father.vue
  <template>
      <child :users="users">
        <template slot="user" slot-scopr="slotProps">
          <li>name: {{ slotProps.user.name }} & age: {{ slotProps.user.age}}</li>
        </template>
      </child>
  </template>
  <script>
    export default {
      data() {
        return {
            users: [ {name: 'tom', age: '20'}]
      }
    }
  </script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 在网上搜了很多关于作用域插槽的解释,感觉没有写得很具体的吧,我认为应该对组件化有很深的理解才会触及到这个问题...
    前端司南阅读 25,076评论 15 40
  • 首先简单说下为什么要使用作用域插槽,有时候需要组件带有一个可从子组件获取数据的可复用的插槽。 下面还是通过例子来讲...
    清风伴我行阅读 1,013评论 0 0
  • 看文档的时候总会懵逼 找了其他大佬的博客看了一下 发现还是"俗" 一点的解释比较适合我 作用域插槽是啥? 官方一...
    const_express阅读 5,220评论 4 2
  • 作用域插槽是一种特殊类型的插槽,用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。 在子组件中,只需将数...
    Ren_YC阅读 378评论 0 0
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 9,528评论 0 13