how can I pass class attribute from parent to child component element?

Look here:

And my goal is that the 'custom-class' will be implemented on the 'input' element in the child component

But just still using the class attribute, and not setting a new prop like "customClass" and accept it in the props of the component

Thanks!

CodePudding user response：

You need to use vue props . Like this:

child component:

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

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

Parent component:

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

CodePudding user response：

This depends on the template structure of your ChildComponent

Your Parent Component can look like this:

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

If your Child looks like this:

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

Because if you have only 1 root Element in your template this will inherit the classes given automatically.

if your Template e.g. looks like this: (only available in vue3)

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

You will need the v-bind="$attrs" so Vue knows where to put the attributes to. Another Solution would be giving classes as props and assigning it to the element with :

CodePudding user response：

Since you're using vue2 the v-bind=$attrs is being hooked to the root element of your component the <div> tag. Check the docs. You can put this wrapper on the parent element if you need it or just get rid of it.

Here is a working example

Another approach

There is also the idea of taking the classes from the parent and passing it to the child component with a ref after the component is mounted

Parent Element:

<template>
  <div id="app">
    <InputField  ref="inputField" />
  </div>
</template>

<script>
import InputField from "./components/InputField";

export default {
  name: "App",
  components: {
    InputField,
  },
  mounted() {
    const inputField = this.$refs.inputField;
    const classes = inputField.$el.getAttribute("class");
    inputField.setClasses(classes);
  },
};
</script>

Child Element:

<template>
  <div>
    <input type="text" value="Test" : />
  </div>
</template>

<script>
export default {
  data() {
    return {
      classes: "",
    };
  },
  methods: {
    setClasses: function (classes) {
      this.classes = classes;
    },
  },
};
</script>

Here a working example

CodePudding user response：

The pattern for the customs form component in Vue 2 where the props go to a child element looks something like this.

<template>
  <div class="input-field">
    <label v-if="label">{{ label }}</label>
    <input
      :value="value"
      :class="inputClass"
      @input="updateValue"
      v-bind="$attrs"
      v-on="listeners"
    />
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    label: {
      type: String,
      default: "",
    },
    value: [String, Number],
    inputClass: {
      type: String,
      default: "",
    },
  },
  computed: {
    listeners() {
      return {
        ...this.$listeners,
        input: this.updateValue,
      };
    },
  },
  methods: {
    updateValue(event) {
      this.$emit("input", event.target.value);
    },
  },
};
</script>

The usage of those components could look something like this.

```html
<template>
  <div id="app">
    <InputField
      v-model="name"
      label="What is your name?"
      type="text"
      class="custom"
      inputClass="input-custom"
    />
    <p>{{ name }}</p>
  </div>
</template>

<script>
import InputField from "./components/InputField";

export default {
  name: "App",
  components: {
    InputField,
  },
  data() {
    return {
      name: "",
    };
  },
};
</script>

A demo is available here

https://codesandbox.io/s/vue-2-custom-input-field-4vldv?file=/src/components/InputField.vue