vue.js+vuetify学习开发排坑：一个古怪的代码 v-slot:activator="{ on, attrs }"

由于需要全栈开发一个售票系统项目，时隔一年后重新捡回了我的前端技术~

开发习惯是边看文档边做，然后再vuetify这个MD设计的UI元件库翻来翻去，再涉及到元件交互的时候有几段代码不是很能理解

      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="red lighten-2"
          dark
          v-bind="attrs"
          v-on="on"
        >
          Click Me
        </v-btn>
      </template>

首先需要明白&attrs的用法，查了一下官方文档：

 

vm.$attrs

• 类型：{ [key: string]: string }

• 只读

• 详细：

  包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

 

我基本理解成$attrs 可以收集父组件中的所有传过来的属性除了那些在组件中没有通过 props 定义的。就是将父类中的很多属性和方法传递给内部组件，方便执行一些命令。

v-slot是插槽的意思，v-slot:activator,意思是slot="activator",是新的写法。

作用域插槽

一般在父组件中引入了子组件，然后又在子组件中插入了插槽，如果插槽中引入了属性，例如：

//父组件中
<current-user>
  {{ user.firstName }}
</current-user>

 

此时的user属性只能引入的是父组件中的user属性，而不是子组件

这是vue的一个规则：父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的

那么，如何在父组件中引用子组件的数据呢？

这就需要使用到作用域插槽：

在子组件childCpn中：

<slot v-bind:user="user">
      默认文字
</slot>

在父组件中：

<childCpn>
  <template v-slot:default="slotProps">
    {{ slotProps.user}}
  </template>
</childCpn>

这样使用插槽时，就可以在父组件中直接使用了子组件的属性

所以回到一开始的问题，代码可以写成如下形式：

<v-menu>
    <template v-slot:activator="slotProps">
        <v-btn v-bind="slotProps.attrs" v-on="slotProps.on">按钮</v-btn>
    </template>
</v-menu>

 

通过获取到了子组件的属性，然后就可以在父组件中直接使用了

另外，作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：

function (slotProps) {
  // 插槽内容
}

这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下（比如支持ES6的浏览器），也可以使用 ES6 解构来传入具体的插槽 prop，如下：

<v-menu>
    <template v-slot:activator="{ on, attrs }">
        <v-btn v-bind="attrs" v-on="on">按钮</v-btn>
    </template>
</v-menu>

 

这样的写法更加简洁明了

（关于解构语法不懂的可以去百度一下了解学习）

部分转载自https://blog.csdn.net/weixin_44710964/article/details/107428727