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

Question

我有一个名为 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 的包装器组件，因此我实际上只需要激活器是可定位的。所以我想将类和样式 Prop 传递给 v-activator。 activator-class我宣布的 Prop 实际上工作正常。但是我很好奇是否有办法改变组件的类和样式属性所绑定(bind)的元素，以便我可以使用类来代替？

Answer 1

这已在 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.x.x 中， $attrs不包括 class和 style ( ref ) 但是在很多情况下，我们希望将所有 Prop 连同类和样式一起传递到另一个组件中，所以 $attrs应该有 class和 style他们确实在 vue.js 的第 3 版中添加了其中的内容。
github上有关于这个话题的详细讨论。请检查它以获取更多详细信息。
对于版本 2，我们想要实现的是类和样式可以传递给另一个组件。我们可以通过从当前组件节点获取类 [as string] 和 style [as object] 来完成它，即 vnode并使用 v-bind 将其传递给其他组件.
现在，您可以将 props 与类和样式一起传递到 ConfirmDocument 内的另一个组件中。直接来自父(或调用者)组件