Как сделать чтобы работали атрибуты на компоненте app-input?

Question

[Айнур Ярулин]

(Используется Vue 3)

Здравствуйте, у меня есть компонент app-input, выглядит он примерно вот так:

<template>
  <div class="input">
    <input type="text">
  </div>
</template>

<script>
...
</script>

Ну, а используется вот так:
<app-input/>

Ну суть в том, что если этому компоненту задать какой нибудь
атрибут, например placeholder или value, то он не будет работать,
сейчас я решил это проблему с помощью props, но может есть какой
нибудь более удобный способ, чтобы атрибуты автоматически применялись
к тегу input внутри компонента?

Answer 1

[Антон Антон]

https://ru.vuejs.org/v2/api/#inheritAttrs

Comments

[Айнур Ярулин]

Можешь подсказать как использовать, сейчас я делаю так:

<template>
  <div class="input-wrapper">
    <input v-bind="$attrs">
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
}
</script>

[Айнур Ярулин]

Антон Антон, но так не работает

[Антон Антон]

squadbrodyaga, работает: https://jsfiddle.net/3gnu851w/5/