vue初学者关于v-slot的三种简单用法说明

由于vue 2.6版本之后废弃了原本的slot用法，(虽说废弃，但还是可以用，不过3.0貌似已经不支持了)，添加了v-slot用法，说是简便了之前复杂的操作，作为初学者一开始查文档看到时一脸懵逼，自己探索后发现其实也并不难，如果你也是初学者希望这篇文章对你有所帮助。

1.默认插槽,先上代码

子组件内容为

  <template id="cpn">
    <div>
      <h3>hello slot</h3>
      //定义一个插槽
      <slot></slot>
    </div>
  </template>

父组件的内容为

    <!-- 由于是默认插槽，所以v-slot可以写在子组件的标签上，而具名插槽和作用域插槽一般写在template标签上，:default此时可以省略 -->
    <!--此处的cpn为我定义的子组件名-->
    <cpn v-slot:default>
        你好
    </cpn>
    
    <!-- 此时在浏览器显示出hello slot 和 你好 -->

由于上面的代码比较简单，就不过多解释，但是默认插槽也可以作为定义域插槽使用,定义域插槽使用后可以从子组件中获取数据到父组件，此处不过多赘述

子组件内容为

  <template id="cpn">
    <div>
      <h3>hello</h3>
      <!--此处的data可随意起名，pLanguage为子组件的data函数中return回来的一个数据-->
      <slot :data="pLanguage"></slot>
    </div>
  </template>

父组件内容为

    <!--此处虽然是做定义域插槽使用，但本质上是default用法，所以v-slot不用写在template中-->
    <!--eat为自定义名称，可随意 :default依然可以省略-->
    <cpn v-slot:default="eat">
      {{eat.data}}
    </cpn>
    
    <!--此时浏览器会显示出hello slot 和 lPlanguage里面的数据-->

这样，就实现在父组件获取子组件数据内容了，需要注意的是，default最好在只有一个插槽时使用，如果有多个插槽个人不建议写成这种形式，会出现很多bug。

2.具名插槽

子组件内容

  <template id="cpn">
    <div>
      <h3>hello</h3>
      <slot name="bbq1"></slot>
      <slot name="bbq2"></slot>
      <slot name="bbq3"></slot>
    </div>
  </template>

父组件内容

    <cpn>
      <template v-slot:bbq1>
        <h3>BBQ1</h3>
      </template>
      <template v-slot:bbq2>
        <h3>BBQ2</h3>
      </template>
      <template v-slot:bbq3>
        <h3>BBQ3</h3>
      </template>
    </cpn>

具名插槽使用了v-slot:代替了2.6之前的slot=的写法，还是比较好看出来的，跟default不同就是v-slot要写在template标签上，否则如果有多个插槽时，会没法控制特定插槽。

3.定义域插槽

子组件内容

  <template id="cpn">
    <div>
      <h3>hello</h3>
      <slot name="bbq" :data="pLanguage"></slot>
    </div>
  </template>

父组件内容

    <cpn>
      <template v-slot:bbq="eat">
        <h3>{{eat.data}}</h3>
      </template>
    </cpn>

定义域插槽里(上面说过大概作用),首先子组件需要给一个自定义的name，然后给一个标识，上例给的是:data="pLanguage"，此处的data可以自定义名称，pLanguage为数据内容,此处基本上与default的定义域用法没有多大差别。差别在v-slot:bbq="eat"这句，写在template标签上，否则多个插槽时会无法识别或出现各种错误，v-slot: 后面跟子组件中name的值，eat为自定义名称。v-slot简写用#实现，即用#代替v-slot:，冒号也需要去掉，也就是说，在v-slot=的情况下不能使用简写。
此篇文章到此结束，如果对你有帮助那就太好了。由于我的水平较低，出现的错误麻烦指正一下，谢谢。解构插槽props我目前正在研究，实在没怎么搞懂，搞懂后再补充。