<template>
    <div class="father">
        <h3>這里是父組件</h3>
        <child>
            <div class="tmpl">
              <span>菜單1</span>
              <span>菜單2</span>
            </div>
        </child>
    </div>
</template>

<template>
    <div class="child">
        <h3>這里是子組件</h3>
    </div>
</template>

看上面的代碼,父模板里面顯示子模板 ,顯示結(jié)果是不會(huì)顯示菜單1 菜單2 的. 那如果想在子模板里面顯示菜單1 菜單2 該怎么辦了呢?

<template>
    <div class="child">
        <h3>這里是子組件</h3>
        <slot></slot>
    </div>
</template>

添加slot 插槽,這就是slot 存在的意義.

插槽分為 匿名插槽,具名插槽,作用域插槽.

匿名插槽
<slot></slot>
具名插槽
<slot name="up"></slot>

作用域插槽
<slot name="up" :data="data"></slot>
 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    },
}

什么時(shí)候該用哪個(gè)插槽? 這個(gè)主要看父模板里面想怎么用了.

這是具名插槽的用法,通過名字可以指定想插入哪個(gè)位置

<template>
  <div class="father">
    <h3>這里是父組件</h3>
    <child>
      <div class="tmpl" slot="up">
        <span>菜單1</span>
      </div>
    </child>
  </div>
</template>

<template>
  <div class="child">
    // 具名插槽
    <slot name="up"></slot>
    <h3>這里是子組件</h3>
    <slot></slot>
  </div>
</template>

這是作用域插槽,父模板可以獲取子模板里面的數(shù)據(jù).

<template>
  <div class="father">
    <h3>這里是父組件</h3>
    <!--第一次使用：用flex展示數(shù)據(jù)-->
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>
    </child>
 </div>
<template>