<div id="app">
<!-- 默认 -->
<h4>默认</h4>
<cpn></cpn>
<hr>
<h4>替换样式</h4>
<cpn>
<!-- 具名插槽和作用域插槽混用 -->
<template v-slot:slot1='props1'>
<!--
<span>
{{props1}}
</span> -->
<span>{{props1.data1.join('-')}}</span>
<h3>
{{props1.msg}}
</h3>
</template>
<template v-slot:slot2="props2">
<h2 style="color: red;">
{{props2.data2}}
</h2>
</template>
</cpn>
<!--
当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。
这样我们就可以把 v-slot 直接用在组件上,但是不能和具名插槽混用
-->
<cpn v-slot="props3">
<template>
<h3 style="color: blue;">
{{props3.data3}}
</h3>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<!-- 可以传多个值 所有的值会包含在一个对象中 在父组件中v-slot=""中定义名字接收 -->
<slot :data1='movies' :msg='message' name='slot1'>
<ul>
<li v-for="(item, index) in movies" :key="index">
{{item}}
</li>
</ul>
</slot>
<slot :data2='name' name='slot2'>
{{name}}
</slot>
<slot :data3='defult'>默认插槽</slot>
</div>
</template>const cpn = {
template: '#cpn',
data() {
return {
movies: ['战狼', '鬼吹灯', '盗墓笔记'],
message: '你好呀',
name: 'yangyanyan',
defult: '我是默认的数据'
}
},
}
const app = new Vue({
el: '#app',
data: {},
components: {
cpn
}
})
External CSS
This Pen doesn't use any external CSS resources.