<body>
<div id="app">
<cpn></cpn>
<cpn>
<template v-slot="slot">
<span> {{ slot.data.join("-") }} </span>
<!-- 拿到slot插槽里面的data 也就是pLanguages数组 把这个数组用分隔符 - 分割 -->
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data="pLanguages">
<!-- <slot :data="pLanguages"> data是自定义的 可以随便写 把pLanguages数组放到 data里面 -->
<ul>
<li v-for="item in pLanguages" slot="slot"> {{ item }} </li>
</ul>
</slot>
</div>
</template>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
<script>
const app = new Vue({
el: '#app',
data: {
},
methods: {
changepLan() {
}
},
components: {
cpn: {
template: "#cpn",
data() {
return {
pLanguages: ["javaScript", "c++", "c#", "JAVA", "php", "python"]
}
},
}
}
})
</script>
</body>