vue插槽使用

插槽的使用

（此文从原文整理而来，更加明了简洁）

1、单个插槽（默认插槽、匿名插槽）注意：匿名插槽每个子组件只能有一个

<template>
    <div class="father">
        <h3>父组件</h3>
        <child><!-- 子组件加载区 -->
            <div class="tmpl"><!-- 匿名插槽模板  替换子组件slot插槽 -->
              <span>菜单1</span>
              <span>菜单2</span>
              <span>菜单3</span>
              <span>菜单4</span>
            </div>
        </child>
    </div>
</template>

<template>
    <div class="child">
        <h3>子组件</h3>
        <slot></slot><!-- 默认加载父组件中包含的匿名文档 -->
    </div>
</template>

2、具名插槽（名字不同多个）

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child><!-- 子组件加载区 -->
      <div class="tmpl" slot="up"><!-- 对应slot的name属性为up -->
        <span>菜单1</span>
        <span>菜单2</span>
        <span>菜单3</span>
      </div>
      <div class="tmpl" slot="down"><!-- 对应slot的name属性为down -->
        <span>菜单-1</span>
        <span>菜单-2</span>
        <span>菜单-3</span>
      </div>
      <div class="tmpl"><!-- 对应匿名slot -->
        <span>菜单->1</span>
        <span>菜单->2</span>
        <span>菜单->3</span>
      </div>
    </child>
  </div>
</template>

<template>
  <div class="child">
    <h3>这里是子组件</h3>
    // 具名插槽
    <slot name="up"></slot>
    // 具名插槽
    <slot name="down"></slot>
    // 匿名插槽
    <slot></slot>
  </div>
</template>

3、作用域插槽（带数据的插槽）

<template>
  <div class="father">
    <h3>这里是父组件</h3>

    <!--第一次使用：用列表展示数据-->
    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{item}}</li>
        </ul>
      </template>
    </child>

    <!--第二次使用：直接显示数据-->
    <child>
      <template slot-scope="user">
       {{user.data}}
      </template>
    </child>

    <!--第三次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
    <child>我就是模板</child>

  </div>
</template>

<template>
  <div class="child">
    <h3>这里是子组件</h3>
    // 作用域插槽
    <slot  :data="data"></slot>
  </div>
</template>

 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    }
 }

 

借鉴：点击打开链接