Как изменить родительские данные дочернего компонента?

После некоторого покопания кажется, что от дочернего элемента к родительскому вам следует обновлять данные, генерируя события (а не v-модель). Это моя попытка сделать это (безрезультатно).

App.vue

<template>
  <div>
    <HelloWorld :count="count" @update:count="count= $event" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

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

HelloWorld.vue

<template>
  <div class="hello">
    <input
      type="number"
      min="0"
      :value="count"
      @input="$emit('input', $event.target.value)"
      style="width:6em"
    />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    count: Number
  }
};
</script>

Где я ошибаюсь? В идеале я хотел бы, чтобы изменения в поле ввода дочернего компонента изменили поле депозита родительского компонента. Спасибо!


vue.js vuejs3
person jlo    schedule 12.12.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, что это не сработает, потому что вам не хватает параметра emits: ['update:count'] в дочернем компоненте, но я рекомендую назвать опору как modelValue в дочернем компоненте и использовать директиву v-model в родительском компоненте вместо события @update:count:

<template>
  <div>
    <HelloWorld v-model="count" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

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

HelloWorld.vue:

<template>
  <div class="hello">
    <input
      type="number"
      min="0"
      :value="count"
     @input="$emit('update:modelValue', $event.target.value)"
      style="width:6em"
    />
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    modelValue: Number
  },
  emits: ['update:modelValue'],
};
</script>

Это позволяет вам создавать настраиваемый ввод

person Boussadjra Brahim    schedule 12.12.2020
comment
Это работает, но значение, которое передается от дочернего к родительскому, заканчивается как String, а не как Number, есть идеи, почему? (начальные значения: count = 10, после изменения / увеличения count = 11) - person jlo; 13.12.2020
comment
попробовать @input="$emit('update:modelValue', Number($event.target.value))" - person Boussadjra Brahim; 13.12.2020
comment
я не уверен, что v-model.number="count" работает - person Boussadjra Brahim; 13.12.2020