1. slot非具名插槽
2. slot具名插槽
3. slot的作用域
父组件代码
<template>
<div>
<h1>part1 </h1>
<part2>
<!-- 1. slot非具名插槽 -->
昨夜西风凋碧树
独上高楼,望尽天涯路
<!-- 2. slot具名插槽 -->
<p slot="myTip">
衣带渐宽终不悔,为伊消得人憔悴
</p>
<!-- 3. slot的作用域 -->
<ul slot-scope="scope">
<li v-for="(v,i) in scope.list" :key="i">
表情:{{v.title}} 描述:{{v.describe}}
</li>
</ul>
</part2>
</div>
</template>
<script>
import part2 from './part2'
export default {
name: 'Home',
data(){
return{
title:1
}
},
components:{
part2
}
}
子组件代码
<template>
<div>
<h1>123456u</h1>
<!-- 1. slot非具名插槽 -->
<slot></slot>
<!--2. slot具名插槽 -->
<slot title="myTip"></slot>
<!-- 3. slot的作用域 -->
<slot :list="lists"></slot>
</div>
</template>
<script>
export default {
name: 'Home',
data(){
return {
lists:[
{title:'开心',describe:'哈哈哈哈'},
{title:'难过',describe:'呜呜呜呜'},
]
}
}
}
</script>
<style scoped>
</style>