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>