Vue slot-scope的理解(适合初学者)

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>

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