作用域插槽 slot-scope

166 阅读1分钟

作用域插槽实际上就是带有数据的插槽,默认插槽和具名插槽里的内容和样式都需要父组件去提供,而作用域插槽带的数据父组件可以取到,可以展示在作用域插槽中。

在父子间使用子组件的数据进行展示。

子组件

<template>
  <div class="child">
    <h3>这里是子组件</h3>
    // 作用域插槽,携带数据data
    <slot  :data="data"></slot>
  </div>
</template>

 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    }
}

父组件

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
    //使用user来接收子组件中的数据,换成其他任何一个变量都可以
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>

    </child>

    <!--第二次使用:用列表展示数据-->
    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{item}}</li>
        </ul>
      </template>

    </child>

    <!--第三次使用:直接显示数据-->
    <child>
      <template slot-scope="scope">
       {{scope.data}} //同{{scope.row.data}}
      </template>

    </child>

    <!--第四次使用:不使用其提供的数据, 作用域插槽退变成匿名插槽-->
    <child>
      我就是模板
    </child>
  </div>
</template>

参考文章:

见了 slot-scope="scope" scope.row 和 slot-scope="{row}" 别不认识怎么用!!!

scope.row和scope.$index

深入理解vue中的slot与slot-scope - SegmentFault 思否

简单理解Vue中的作用域插槽 - 知乎 (zhihu.com)