vue中的插槽（slot和slot-scope）

先说一下个人理解：vue页面的组成主要靠父子组件的组合，而父子组件之间内容和消息的传递主要靠的是slot props emit等实现。
从子组件向不向slot中传递数据的角度来看，插槽主要分为不带数据的插槽和带数据的插槽，而不带数据的插槽又可以分为匿名插槽/单个插槽/默认插槽和具名插槽的，当然带数据的插槽同样也可以分为上面两种插槽。

不带数据的插槽

匿名插槽/默认插槽/单个插槽

<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
            <div class="tmpl">
              <span>菜单1</span>
              <span>菜单2</span>
              <span>菜单3</span>
              <span>菜单4</span>
              <span>菜单5</span>
              <span>菜单6</span>
            </div>
        </child>
    </div>
</template>

<template>
    <div class="child">
        <h3>这里是子组件</h3>
        <slot></slot>
    </div>
</template>

这类插槽子组件中只能有一个，多了会报以下duplicate presence重复存在的错误。以上例子中的slot标签负责将父组件中的内容传递到子组件中来。
在这里插入图片描述

具名插槽

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <div class="tmpl" slot="up">
        <span>菜单1</span>
        <span>菜单2</span>
        <span>菜单3</span>
        <span>菜单4</span>
        <span>菜单5</span>
        <span>菜单6</span>
      </div>
  </div>
</template>

<template>
  <div class="child">
  	<h3>这里是子组件</h3>
    <slot name="up"></slot>
  </div>
</template>

这类插槽子组件中可以有多个，通过name来进行区分。

带数据的插槽

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>
    </child>
  </div>
</template>

<template>
  <div class="child">
    <h3>这里是子组件</h3>
    <slot  :data="data"></slot>
  </div>
</template>

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

这里以匿名插槽为例，对于这类带数据的插槽，父组件通过slot-scope来获取子组件中传递过来的数据，从而实现了父组件仅可以控制子组件插槽中的样式，而其中的内容由父子组件共同决定。

总结： 父子组件的组合实现了页面的模块化，而slot/props/emit等实现了各个模块之间内容和消息的传递，具体通过何种方式，内容分发？这个以后再深入思考。通过slot，父组件实现了对子组件插槽样式的控制，而内容则由父子附件共同决定。

参考：https://juejin.im/post/5a69ece0f265da3e5a5777ed#comment

vue中的插槽（slot和slot-scope）

猜你喜欢