組件化 slot 插槽
demo github地址：feature/slot 分支
直接上代碼體會(huì)插槽的使用吧
<!-- parent -->
<template>
<div class="home">
<p>Home</p>
<i>{{msg}}</i>
<Child>
<p>這是傳給第一個(gè)插槽的內(nèi)容</p>
<p slot="second">這是傳給第二個(gè)插槽的內(nèi)容</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>第一個(gè)插槽(default)</p>
<slot></slot>
<p>第二個(gè)插槽(name="second")</p>
<slot name="second" :slotObj="slotObj"></slot>
</div>
</template>
<script>
export default {
data() {
return {
msg: '子組件的msg在子組件的作用域',
slotObj: {
firstName: '張三',
lastName: '尼古拉斯'
}
}
}
};
</script>
