vue之slot作用域简单代码展示

<div id="app">
    <cpn1></cpn1>

    <cpn1>
        <template slot-scope="slot">	//3.使用  slot-scope 来引用到模板指向的那个对象也就是这个数组
        <slot >
                <span v-for="item in slot.data.join('-')">{{item}}</span>
                //这里的join方法是讲数组拆解成字符串用 （参数）来进行拼接
        </slot>
        </template>
    </cpn1>

</div>
<template id="cpn1">

    <div>
        <slot :data="pLanguages">   //2.使用  :data 属性 让这个模板指向某个对象
        //1.首先拿到模板里面的数据进行展示
        <ul>
            <li v-for="item in pLanguages">{{item}}</li>
        </ul>
        </slot>
    </div>

</template>
<script>



    const app = new Vue({
        el: '#app',
        data: {
            message:'你好'
        },

        components:{
            cpn1 : {
                template: '#cpn1',
                data(){
                    return {
                        pLanguages : ['a','b','c','d','e']
                    }
                }
            }

        }
    })
</script>