slot

slot就是父組件把內容分發給子組件,插槽模板是slot，它是一個空殼子，因為它的顯示與隱藏以及最后用什么樣的html模板顯示由父組件控制。但是插槽顯示的位置確由子組件自身決定，slot寫在組件template的什么位置，父組件傳過來的模板將來就顯示在什么位置。

?

父組件：

<template><div><home01><p>我是沒有定義name的</p><p slot="footer">name是footer</p><p slot="header">name是header</p></home01></div>
</template>

?

<script>import home01 from "./Home01.vue";export default {data() {return {};},components: {home01}
};
</script>

?

子組件：

<template><div><slot name="header"></slot><slot name="footer"></slot><slot></slot></div>
</template>

?

2.作用域插槽：可以傳遞參數，顯不顯由父組件說了算，數據由子組件決定，注意<template slot-scope="">不能忘

? ?父組件：

??

<template><div class="father"><slotshow><template slot-scope="ss"><span v-for="(item,index) in ss.kk" :key="index">{{item}}</span></template></slotshow></div>
</template>
<script>
import slotshow from "../components/Home16.vue";
export default {components: {slotshow}
};
</script>

子組件：

 
<template><div class="child"><slot :kk="data"></slot></div>
</template>
<script>export default {data: function(){return {data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']}}
}
</script>

?

?