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>