Vue JS, как использовать значения реквизита для V-модели

Question

У меня есть два компонента, а именно App.vue и hello.vue

В компоненте App я импортирую компонент hello и использую реквизиты для передачи соответствующих данных в компонент hello . там я связываю данные, взятые из компонента App .

В моем компоненте hello у меня есть input box привязка к переданному значению.

Моя последняя цель - передать значения в качестве реквизита для hello компонента и изменить его, и, наконец, передать отредактированные значения в бэкэнд, используя метод save.

Как мне этого добиться?

Это то, что я делал до сих пор.

App.vue

<template>
  <div id="app">
    <hello-world :msg="'hello good morning'"></hello-world>
  </div>
</template>

<script>
import helloWorld from "./components/HelloWorld";
export default {
  components: {
    helloWorld
  }
};
</script>

hello.vue

<template>
  <div>
    <input type="text" :value="msg">
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

В моем поле ввода компонента hello v-модель невозможна. Я хочу что-то похожее на V-модель.

Answer 1

Вы не можете использовать prop для привязки к v-model. Дочерний компонент не должен изменять prop, переданный родительским компонентом.

Вам нужно будет создать копию prop в своем дочернем компоненте, если вы хотите использовать prop с v-model, а затем смотреть prop следующим образом:

<template>
    <div>
        <input type="text" @input="onInput" v-model="msgCopy">
    </div>
</template>

<script>
export default {
    name: "HelloWorld",
    props: {
        msg: String
    },

    data() {
        return { msgCopy: '' };
    },

    methods: {
        onInput(newInputValue) {
            this.$emit('msgChange', newInputValue);
        }
    }

    watch: {
        msg(newVal) {
            this.msgCopy = newVal;
        }
    }

};
</script>

Также обратите внимание на использование обработчика событий @input для передачи измененного prop обратно в родительский компонент через событие. В качестве синтаксического сахара вы можете заставить ваш Hello компонент работать как пользовательский элемент управления вводом формы, приняв v-model жизненный цикл.