solt，它是一個(gè)空殼子，因?yàn)樗娘@示與隱藏以及最后用什么樣的html模板顯示由父組件控制瞒大。但是插槽顯示的位置確由子組件自身決定，slot寫在組件template的什么位置宵喂，父組件傳過來的模板將來就顯示在什么位置糠赦。
作用域插槽
在組件內(nèi) 通過 slot-scope 取到 子組件 <solt :data=' '> data綁定的值
代碼 示例 如下
<template>
<div class="father">
<h3>這里是父組件</h3>
<!--第一次使用：用flex展示數(shù)據(jù)-->
<child>
<template slot-scope="childEmit">
<div class="tmpl">
<span v-for="item in childEmit.data" :key="childEmit.data.index">{{item}}</span>
</div>
</template>
</child>
<!--第二次使用：用列表展示數(shù)據(jù)-->
<child>
<template slot-scope="childEmit">
<ul>
<li v-for="item in childEmit.data" :key="childEmit.data.index">{{item}}</li>
</ul>
</template>
</child>
<!--第三次使用：直接顯示數(shù)據(jù)-->
<child>
<template slot-scope="childEmit">
{{childEmit.data}}
</template>
</child>
<!--第四次使用：不使用其提供的數(shù)據(jù), 作用域插槽退變成匿名插槽-->
<child>
我就是模板
</child>
</div>
</template>
<template>
<div class="child">
<h3>這里是子組件</h3>
<!-- // 作用域插槽 -->
<slot :data="todo"></slot>
</div>
</template>
<script>
export default {
name: "child",
data() {
return{
todo: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
};
}
};
</script>
實(shí)現(xiàn) 效果 如下
test.png
