（VueJS）作用域插槽

作用

实现父组件替换插槽的标签，但内容由子组件提供

需求案例：

子组件中定义一个数组：languates:[‘Java’,‘C’,‘C++’,‘python’]

 const cpn1=Vue.extend({
        template:'#tp',
        data(){
            return {
                languates:['Java','C','C++','python']
            }
        }
    })

父组件展示时的各样式不同，数据在子组件中，如何实现？

子组件中设置插槽，设置abc（任意）属性

    <div>
        <slot :abc="languates">
        <p v-for="item in languates">{{item}}</p>
        </slot>
    </div>

父组件中运用

    <cpn>
        <template slot-scope="slot">
            <span>{{slot.abc.join(' - ')}}</span>
        </template>
    </cpn>

运行结果：