作用域插槽使用-使用笔记

自我理解

父子组件使用data数据时，之前我都是在子组件定义data数据，在子组件中进行使用；
在父组件中定义的data数据，在父组件中进行使用；
使用作用域插槽可以将子组件的数据通过插槽给传递给父组件，在父组件中进行类型展示

要点

子组件中使用
1.子组件存在data数据

// 子组件child-cpn
data () {
  return {
    dataList: ['tsz', 'swk', 'zbj', 'shs']
  }
}

2.子组件需要有插槽slot

<h2>我是子组件标题</h2>
<slot></slot>

3.在slot标签/元素上传递数据，就像父组件给子组件传参一样动态把子组件的数据传递给父组件
语法：冒号后面跟着自定义名字=“需要传递给父亲的数据”

<slot :data="dataList"></slot>

父组件中使用
4父组件在使用子组件时，内部需要有template元素/标签，该标签里面只能有一个最大的div盒子

<child-cpn>
  <template>
    <div></div>
  </template>
</child-cpn>

5.template元素/标签上设置slot-scope属性=“这是一个对象-自定义对象”，然后就可以在div盒子中通过自定义对象.自定义名字获取传递过来的数据

// 渲染成span标签练习
<child-cpn>
  // 在这我使用a接收，a是一个对象
  <template slot-scope="a">
    <div>
      // 在这里就可以使用a.data获取到子组件内部传递过来的数据，然后遍历出来
      <span v-for="item in a.data" :key="item">{{ item }}</span>
    </div>
  </template>
</child-cpn>

// 渲染成button标签练习
<child-cpn>
  // 在这我使用b接收，b是一个对象
  <template slot-scope="b">
    <div>
      // 在这里就可以使用b.data获取到子组件内部传递过来的数据，然后遍历出来
      <button v-for="item in b.data" :key="item">{{ item }}</button>
    </div>
  </template>
</child-cpn>

自我感觉a和b其实是同一个对象，都可以通过a.data/b.data获取数据；

总体思路

子组件数据通过自定义名称动态传递给父组件；
父组件template通过slot-scope属性等于一个自定义对象来接收传过来的自定义名称；
然后就可以通过自定义对象.自定义名称获取传递过来的子组件数据