Блог

После некоторого изучения кажется, что от дочернего компонента к родительскому вам следует обновлять данные, отправляя события (не по 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>
 

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

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

 <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>
 

Это позволяет создавать пользовательский ввод