如何将类属性传递给子组件元素

Question

如何将类属性从父组件元素传递到子组件元素？

看这里： https: //codesandbox.io/s/pedantic-shamir-1wuuv

我正在向组件“输入字段”添加类

我的目标是“自定义类”将在子组件中的“输入”元素上实现

但仍然使用 class 属性，而不是设置像“customClass”这样的新道具并在组件的道具中接受它

谢谢！

Answer 1

我参加聚会迟到了，但我想分享我的解决方案，因为以上答案都不是我想要的。当然，您可以使用保留class关键字以外的其他名称（例如classes）将此类作为 prop 传递，但是如果您正在构建一个库，例如您想要允许内置 HTMLclass属性，这就是我所做的它。

如果您想将class来自父组件的属性（例如<child class="my-class">）添加到子组件的特定节点：

视图3

在 Vue 3 中这很容易，因为它可以通过$attrs. 你只需要v-bind="$attrs"在你想要的子元素上。https: //vuejs.org/guide/components/attrs.html#class-and-style-merging

如果您有一个根节点，那么您将在父节点上复制该类： https: //vuejs.org/api/component-instance.html#attrs

默认情况下，如果只有一个根元素，$attrs 中的所有内容都会自动继承到组件的根元素上。块引用

为了防止这种情况，您可以添加inheritAttrs: false到子组件中，这样它就不会从根节点上的父组件获取任何属性。

如果您有多根元素，则不需要此。

视图2

它并不那么简单，因为class和style属性在 Vue 2 中不可用$attrs（其余 HTML 属性都在那里，并且所有 props 在 中可用$props）。

this.$vnode.data.staticClass我已经通过从子组件访问类并添加v-bind="{ class: $vnode.data.staticClass }"到您想要添加类的节点来解决这个问题。

Vue 2 是遗留版本，所以现在不再那么重要 :man_shrugging:

Answer 2

您需要使用vue props。像这样：

子组件：

<template>
  <div>
    <input :class="className" type="text" value="Test" v-bind="$attrs" />
  </div>
</template>

<script>
export default {
  props:{
    className:{
      type:String,
      default:'',
     }
  }
};
</script>

父组件：

 <div id="app">
    <InputField  :class-name="'custom-class'" />
  </div>