如何将 vue 组件上的类和样式属性传递给 $attrs 等不同的元素？

Posted 2023-02-23

【中文标题】如何将 vue 组件上的类和样式属性传递给 $attrs 等不同的元素？

【英文标题】：How can I pass class and style attributes on a vue component to a different element like $attrs?

【发布时间】：2021-05-25 12:53:19

【问题描述】：

我有一个名为confirm-document 的文件组件，看起来像这样：

Sandbox

<template>
  <v-dialog>
    <template v-slot:activator=" on ">
      <v-btn v-bind="$attrs" :class="activatorClass" v-on="on">
        title
      </v-btn>
    </template>
    <v-card>
      <v-card-title> title </v-card-title>
      <v-card-text><slot></slot></v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
export default 
  name: "ConfirmDocument",
  props: 
    title: String,
    activatorClass: ,
  ,
;
</script>

所以当我然后像这样使用这个组件时：

<ConfirmDocument
    class="useless-class"
    activator-class="mt-4 ml-n4"
    title="Consent"
> Document Content </ConfirmDocument>

Sandbox

这些类被应用到v-dialog，它最终成为一个不可见的 div，里面没有任何内容，并且激活器和模态都作为兄弟节点附加。

由于这主要是一个提供一致 UI 的包装器组件，因此我实际上只需要激活器是可定位的。所以我想将 class 和 style props 传递给 v-activator。

我声明的 activator-class 属性实际上工作正常。但是我很好奇有没有办法改变组件的class和style属性绑定到的元素，这样我就可以用class来代替了？

【参考方案1】：

使用 props 来处理这个问题有什么好处？

<template>
  <v-dialog>
    <template v-slot:activator=" on ">
      <v-btn :class="btnClass" v-on="on">Read  title </v-btn>
    </template>
    <v-card>
      <slot></slot>
    </v-card>
  </v-dialog>
</template> 

<script>
export default 
   props: 
      btnClass:  type: String ,
      title:  type: String 
   

</script>

并使用组件：

<confirm-document 
  btn-class="mt-0 mb-0"
  title="Privacy Policy"
>
  Lorem ipsum dolor sit amet
</confirm-document>

【讨论】：

我不想这样做，正如我在问题中所说的那样。原因是我觉得它很麻烦而且不直观。当我认为除了激活器之外没有人想要设置任何样式时，需要阅读组件的文档或查看组件以了解如何设置激活器的样式。

我不觉得它很麻烦，而且实际上发现您的首选行为具有误导性。 vue 组件上的类将始终附加到组件本身的根元素，那么为什么要打破这个规则呢？ btn-class 不是更具描述性，因为您想将它用于按钮吗？再想一想：将来您也想将自定义类传递给v-card。您想如何实现这一目标？

继承样式和类的“根”元素实际上是不可见的。即使在模态打开时也不行。它甚至不包含任何实际可见的内容。它只包含一个空注释，并且激活器和模态被附加为兄弟。我不确定为什么会这样，但 Vuetify 就是这样做的。我不认为你真的想要设计它

至于卡片：我希望它不在组件之外设置样式。这不是包的一部分，它是一个包装器组件，用于在应用程序中创建一致的 UI。所以所有的样式都应该发生在这个组件中。我实际上认为激活器只需要可定位而不是完全可样式化，但它更容易灵活。

【参考方案2】：

我认为您可以使用inheritAttrs: false 属性。它的作用是确保属性不会自动应用于根元素，并允许您选择在何处应用它们。

<template>
  <v-dialog>
    <template v-slot:activator=" on ">
      <v-btn v-bind="buttonAttrs" >Read  title </v-btn>
    </template>
    <v-card>
      <slot></slot>
    </v-card>
  </v-dialog>
</template> 

<script>
export default 
  inheritAttrs: false,
  props: 
    title: type: String,
  ,
  computed: 
    buttonAttrs () 
      // select which attrs to apply
      const  title, ...rest  = this.$attrs;

      return rest;
    
  

</script>

可以在here 找到一个工作（但有点混乱）的示例。

【讨论】：

我tried this out，不幸的是它不起作用。 documentation 指定：“请注意，inheritAttrs: false 选项不会影响样式和类绑定。”

你能解决这个问题吗？我正在使用第三方框架，并且我需要通过包装 div 传递类和样式，并且不能使用 $attrs 来完成。

【参考方案3】：

这已在 Vue.js v3 ref

中修复

对于 Vue.js v2，你可以试试这个

检查下面的v-bind 和attrs 计算属性

<template>
  <v-dialog>
    <template v-slot:activator=" on ">
      <v-btn v-bind="attrs" v-on="on">
        title
      </v-btn>
    </template>
    <v-card>
      <v-card-title> title </v-card-title>
      <v-card-text><slot></slot></v-card-text>
    </v-card>
  </v-dialog>
</template>

<script>
export default 
  name: "ConfirmDocument",
  inheritAttrs: false, // <- added just for safety
  props: 
    title: String,
  ,
  computed: 
    attrs() 
      const attrs =  ...self.$attrs 

      // adding class and style for `v-bind`
      attrs.class = self.$vnode.data.staticClass
      attrs.style = self.$vnode.data.staticStyle
            
      return attrs
    
  
;
</script>

说明 - 在 Vue.js 版本 2.xx 中，$attrs 不包括 class 和 style (ref) 但有很多场景我们想通过将所有道具连同类和样式一起放到另一个组件中，因此$attrs 应该在其中包含class 和style，它们确实在 vue.js 的版本 3 中添加。 github 上有关于此主题的详细讨论，请查看它以获取更多详细信息。

对于版本 2，我们想要实现的是类和样式可以传递给另一个组件。我们可以通过从当前组件节点（即vnode）获取类 [as string] 和 style [as object] 来完成它，然后使用 v-bind 将其传递给另一个组件。

现在，您可以直接从父（或调用者）组件将 props 以及类和样式传递到 ConfirmDocument 内的另一个组件