<!-- vue2.6之前写法 -->
<div id="app">
<!-- 以下三个组件 内容一样，样式不同 -->
<cpn></cpn>
<cpn>
<!--slot-scope声明属性名 接收子组件传递的数据pLanguages-->
<template slot-scope="slot">
<!-- 在dom标签使用该数据，通常用插值表达式接收具体数据 -->
<!--<span v-for="item in slot.data"> - {{item}}</span>-->
<h3>{{slot}}</h3>
<span>{{slot.data.join(' - ')}}</span>
</template>
</cpn>
<cpn>
<template slot-scope="slot">
<!--<span v-for="item in slot.data">{{item}} * </span>-->
<span>{{slot.data.join(' * ')}}</span>
</template>
</cpn>
<!--<cpn></cpn>-->
</div>
<!-- 子组件 template -->
<template id="cpn">
<div>
<!-- 作用域插槽要求，在slot上面绑定数据 -->
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages">{{item}}</li>
</ul>
</slot>
<hr>
</div>
</template>const app = new Vue({
el: '#app',
data: {
message: '你好啊'
},
components: {
cpn: {
template: '#cpn',
data() {
return {
pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']
}
}
}
}
})
External CSS
This Pen doesn't use any external CSS resources.