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>