vue 作用域插槽、slot 、v-slot 、slot-scope

╰半夏微凉° 2021-09-19 00:28 556阅读 0赞

**vue 插槽slot 和 具名插槽**   
作用都是在调用组件的时候传递一些DOM结构进去，  
不同点是：具名插槽在传递DOM时需要声明，传递给哪个slot的名字 name  
他们用法简单不在赘述。

**重点说一下作用域插槽 slot-scope 的使用，以及vue2.6.X开始的新语法v-slot**

作用域插槽的核心作用是：  
**子组件给父组件传递数据,当然也包含上述插槽的能力**

老版作用域插槽，

slot="test“： 指定插槽的名字用  
prop：可以随便定义，表示子组件传递过来的值得对象，可以用解构复制 \{ row, index \}接受

新版是这样的，可以说语法更加清晰  
v-slot指令直接跟上插槽名称，prop同上

**实例说明**

子组件  
这里我定义了多个具名插槽，并且用父组件传过来的数据尝试传递回去

<template>
      <div>
        <slot :user="user">
          
          {
       { user.age }} 
        </slot>
        <slot name="test" :wife='wife'>
          {
       {wife.a}}
        </slot>
        <slot name="hasProps" :baseData='baseData'>
          {
       {baseData.a_count}}
        </slot>
      </div>
    </template>
    <script>
    export default {
      props: {
        baseData: {
          type: Object,
          default: () => {
            return {
              a_count: 0,
              b_count: 0,
              c_count: 0,
              d_count: 0,
              e_count: 0,
              order_amount: 0,
              order_num: 0,
              resource_num: 0
            }
          }
        }
      },
      data () {
        return {
          user: {
            name: '张三',
            age: 20
          },
          wife: {
            a: '小李',
            b: '小韩'
          }
        }
      }
    }
    </script>

父组件  
部分代码：  
其中的baseData，为服务端异步返回数据

<div>
          <child>
            <template v-slot:default="prop">
              {
       { prop.user.age }}
            </template>
            <template v-slot:test="prop">
              {
       { prop.wife.b }}
            </template>
          </child>
          
          <child>
            <template slot-scope="prop">
              {
       { prop.user.name }}
            </template>
            <template slot="test" slot-scope="prop">
              {
       { prop.wife.a }}
            </template>
          </child>
          
          <child :baseData='baseData'>
            <template v-slot:hasProps="{baseData}">
              {
       { baseData.a_count }}
            </template>
          </child>
        </div>

**效果图：**

这两种是先注释掉所有child里面，所有代码的效果，前为接口返回前

![在这里插入图片描述][2019041817142552.jpg]  
![在这里插入图片描述][20190418171446383.jpg]  
这两张是不注释，前后图

![在这里插入图片描述][20190418171649945.jpg]  
![在这里插入图片描述][20190418171659299.jpg]

可以看出，  
在vue2.6以上两种模式都支持，不过官方说3.0就只支持v-slot指令了，  
不使用作用域插槽就会显示默认的值，使用之后就按父组件的来  
可以先动态更新数据。

使用过element-ui的同学，只要用过表格，我想现在应该明白作用域插槽有多大的用处了吧

[2019041817142552.jpg]: /images/20210812/54f653ed621d43a787834fb3eb2b2bf0.png
[20190418171446383.jpg]: /images/20210812/fb66acb2743c4e48b5a8b3e0d2534c5e.png
[20190418171649945.jpg]: /images/20210812/152def814b884192a7086cb6164fa26e.png
[20190418171659299.jpg]: /images/20210812/6b308ab1d10d41fba1a8d80969c2ce6e.png