Vue slot-scope的理解（适合初学者）

1/26/2019 2:58:04 PM

---

Vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和方法，数据，计算机等常用选项在使用频率，使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”的想法，于是就关闭了VUE的说明文档。

实际上，插槽的概念很简单

slot

• 概念：插槽，也就是槽，是组件的一块HTML模板，这块模板显示不显示，以及怎样显示由父组件来决定。

插槽可以分为3部分来说

• 单个插槽

  ---

  • 首先是单个插槽，单个插槽的英文VUE的官方叫法，但是其实也可以叫它默认插槽，或者与具名插槽相对，我们可以叫它匿名插槽。因为它不用设置名称属性。

  • 单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一个该类插槽。相对应的，具名插槽就可以有很多个，只要名字（名称属性）不同就可以了。

下面通过一个例子来展示。

父组件：

    <div class="slot-righ">
                <p>22222</p>
                <Slo>
                    <div class="con">
                        111111
                    </div>
                </Slo>
            </div>

子组件：

    <div class="sol">
        <p>11111</p>
        <slot></slot>
      </div>

• 具名插槽
  • 匿名插槽没有名称属性，所以是匿名插槽，那么，插槽加了名称属性，就变成了具名插槽。具名插槽可以在一个组件中出现Ñ次，出现在不同的位置。下面的例子，一个就是有两个具名插槽状语从句：单个插槽的组件，这三个插槽被父组件用同一套的CSS样式显示了出来，不同的是内容上略有区别。

下面通过一个例子来展示。

父组件：

<div class="slot-righ">
            <p>22222</p>
            <Slo>
                <div class="con" slot="up">
                    111111
                </div>
            </Slo>
        </div>

子组件：

<div class="sol">
    <p>11111</p>
    <slot name="up"></slot>//具名插槽
  </div>

• 作用域插槽| 带数据的插槽

  • 最后，就是我们的作用域插槽。这个稍微难理解一点。官方叫它作用域插槽，实际上，对比前面两种插槽，我们可以叫它带数据的插槽。什么意思呢，就是前面两种，都是在组件的模板里面写

下面通过一个例子来展示。

父组件：

<div class="slot-righ">
                <p>22222</p>
                <Slo>
                    <div class="con" slot-scope="user">//父组件拿到数据
                        {{user.data}}
                    </div>
                </Slo>
            </div>

子组件：

<template>
  <div class="sol">
    <p>11111</p>
    <slot :data="data"></slot>//这里再插槽上绑定数据
  </div>
</template>
<script>
    export default {
      data(){
        return {
          data:11111111
        }
      }
    }
</script>

正因为作用域插槽绑定了一套数据，父组件可以拿来用于是，情况就变成了这样：样式父组件说了算，但内容可以显示子组件插槽绑定的。