组件化 slot 插槽
demo github地址：feature/slot 分支
直接上代码体会插槽的使用吧
<!-- parent -->
<template>
<div class="home">
<p>Home</p>
<i>{{msg}}</i>
<Child>
<p>这是传给第一个插槽的内容</p>
<p slot="second">这是传给第二个插槽的内容</p>
<hr/>
<template v-slot:second="slotProps">
{{ slotProps.slotObj }}
</template>
</Child>
</div>
</template>
<script>
import Child from "../components/Child"
export default {
name: 'Home',
components: {
Child
},
data() {
return {
msg: '父组件的msg在父组件的作用域'
}
}
}
</script>
<!-- child -->
<template>
<div>
<p>Child</p>
<i>{{msg}}</i>
<p>第一个插槽(default)</p>
<slot></slot>
<p>第二个插槽(name="second")</p>
<slot name="second" :slotObj="slotObj"></slot>
</div>
</template>
<script>
export default {
data() {
return {
msg: '子组件的msg在子组件的作用域',
slotObj: {
firstName: '张三',
lastName: '尼古拉斯'
}
}
}
};
</script>
