Vue 插槽 slot 学习

<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>

看上面的代码,父模板里面显示子模板 ,显示结果是不会显示菜单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']
      }
    },
}

什么时候该用哪个插槽? 这个主要看父模板里面想怎么用了.

这是具名插槽的用法,通过名字可以指定想插入哪个位置

<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>

这是作用域插槽,父模板可以获取子模板里面的数据.

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <!--第一次使用：用flex展示数据-->
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>
    </child>
 </div>
<template>

Vue 插槽 slot 学习

推荐阅读更多精彩内容