Question

我有两个组件，分别是 App.vue 和 hello.vue

在 App 组件中，我导入 hello 组件，并使用prop将相关数据传递到 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组件作为自定义表单输入控件工作。

Vue JS如何使用props值进行v-model

1 个答案: