vue.js - 如何将类属性传递给子组件元素

Question

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

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

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

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

但仍然使用 class 属性，而不是设置一个新的 prop，如“customClass”，并在组件的 props 中接受它

谢谢!

Answer 1

这取决于您的 ChildComponent 的模板结构

您的父组件可能如下所示:

<div id="app">
    <InputField  class="anyClass" />
</div>

如果您的 child 看起来像这样:

<template>
   <input ... />
</template

因为如果您的模板中只有 1 个根元素，这将自动继承给定的类。

如果您的模板例如看起来像这样:(仅在 vue3 中可用)

<template>
   <input v-bind="$attrs" />
   <span> hi </span>
</template

您将需要 v-bind="$attrs" 以便 Vue 知道将属性放在哪里。另一种解决方案是将 classes 作为 props 并使用 :class="classes"

将其分配给元素