Как правильно оборачивать чужие компоненты?

Question

[Dmi3ii]

Добрый день.

Я нашел чужой крутой input, хочу его подкорректировать и использовать со своими настройками. Как его правильно "обернуть", чтоб не менять сам компонент? Другими словами хочу донести v-model до AlienComponent сохраняя реактивность.

Пытаюсь реализовать как то так:

AlienComponent.vue

<template>
  <div>
    <input 
      type="text" 
      :value="value" 
      @input="$emit('input', $event.target.value)"
    >
  </div>
</template>

<script>
export default {
  name: 'alien-component',
  props: { value: [String] }
};
</script>

MyCoolInput.vue

<template>
  <div>
    <label>{{ label }}</label>
    <alien-component
      :value="value"
      @input="$emit('input', this.$event.target.value)" 
    />
    <!-- 
      @input="$emit('input', this.$event.target.value)" 
      вызывает ошибку: Avoid mutating a prop directly since the value will be overwritten
    -->
  </div>
</template>

<script>
import AlienComponent from './AlienComponent.vue';
export default {
  name: 'my-cool-input',
  components: { AlienComponent },
  props: { value: [String], label: [String] }
};
</script>

MyApp.vue

<template>
  <div>
    <h1>TEST</h1>
    <my-cool-input label="ввод:" v-model="my_value"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      my_value: 'test value'
    };
  }
};
</script>

Благодарю за советы.

Answer 1

[0xD34F]

<alien-component
  :value="value"
  @input="$emit('input', this.$event.target.value)" 
/>

Никаких target'ов не надо, вы из компонента получаете само значение, так что правильно будет так:

<alien-component
  :value="value"
  @input="$emit('input', $event)" 
/>

Comments

[Dmi3ii]

Спасибо!

в MyCoolInput.vue заменил @input на @input="$emit('input', $event)". Вью ругаться перестал.