Как правильно прокидывать props в компонент?

Question

[Артур Кудашев]

Здравствуйте, сам разрабатываю на React, но приходится поддерживать проекты на Vue. Не совсем могу понять как правильно прокидывать props в компонент. Есть компонент Input:

<template>
    <input class="Input" v-bind="restProps" v-on="$listeners">
</template>

<script>
export default {
    props: ['placeholder', 'keyupEnter'],

    computed: {
        restProps: function() {
            return {  
                placeholder: this.placeholder
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.Input {
    width: 100%;
    height: 42px;
    padding: 0 17px;
    font-size: 12px;
    border: 1px solid #E3E3E3;
    border-radius: 2px;
}
</style>

Вот как он используется:

<Input placeholder="Название вопроса"
       :value="question.name"
       @input="actions.changeQuestionName(index, $event)" />

<Input placeholder="Название ответа"
       @keyup.enter="actions.addQuestionAnswer.bind(null, index)" />

Проблемы:

• Как я понял, во Vue нету понятия restProps. Нужно либо все props пачкой накидывать через v-bind, либо
  самому собирать нужные props в объект, что бы получилось что-то похожее. Это так или я что не понимаю?
  
• Тоже самое можно делать с обработчиками. Можно пачкой накинуть через v-on, но почему-то
  @input отрабатывает, а @keyup.enter не хочет работать. В чем подвох?
  

Читал доки, но не особо понял как это делать правильно. Может то, что я пытаюсь сделать работает только в React.

Comments

[Алексей Ярков]

Пример запилите на jsfiddle например

[VegasChickiChicki]

Вот например, просто собрать в объект и передать несколько props как объект:
https://ru.vuejs.org/v2/guide/components-props.htm...

Но компонент вообще странный, он для примера или это какое то своеобразное решение?

[Артур Кудашев]

Алексей Ярков, вот: https://codesandbox.io/s/proud-sea-z7ttx. На codesandbox работает, хотя код точно такой же.

Answer 1

[Сергей delphinpro]

Если я правильно понимаю, то есть опции inheritAttrs и $attrs.

И можно прокидывать все свойства
v-bind="$attrs"

По умолчанию необъявленные пропсы вешаются на корневой элемент компонента.
inheritAttrs может запретить это, чтобы повесить их на другой элемент. Например

<div class="inputbox">
  <input v-bind="$attrs">
</div>
{
  inheritAttrs: false
}

Comments

[Артур Кудашев]

Сергей delphinpro, я видел такой способ. Но мне нужно не все прокидывать, а некоторые. Как в React restProps

[Aetae]

Артур Кудашев, тогда v-bind="$props", логично?)
Или тебе нужно "все что не $props"? Тогда как раз $attrs - в них не входят $props.
А если что-то особенное, тогда уж да - вручную.

Ну и с событиями всё в порядке, это у тебя с bind хренотень какая-то скорее всего.

[Артур Кудашев]

Aetae, да баг был в bind. Спасибо.