[Vue] slot--作用域插槽

1、子组件中 data() 有 pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']

data() {
          return {
            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
          }
        }

2、子组件模板插槽 slot ，自定义属性 data 绑定 pLanguages，:data="pLanguages"

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

3、父组件应用子组件 cpn，在 template 中利用slot-scope="slot" 绑定 子组件模板

<cpn>
    <!--目的是获取子组件中的pLanguages-->
    <template slot-scope="slot">

    </template>
  </cpn>

4、slot.data 指向 pLanguages

<span>{{slot.data.join(' * ')}}</span>

效果下图：