Question

这里有两个部分：

msg.vue

<template>
 <div>
   <input type="text" v-model="msg" />
 </div>
</template>
<script>
export default {
 name: "msg",
 props: ["msg"]
};
</script>

samples.vue

<template>
  <div>
    <h2>{{ msg }}</h2>
  </div>
</template>
<script>
export default {
  name: "samples",
  props: ["msg"]
};
</script>

最后

App.vue

<template>
  <div id="app">
    <samples v-bind:msg="msg"></samples>
    <msg :msg="msg"></msg>
  </div>
</template>

<script>
import samples from "./components/samples.vue";
import msg from "./components/msg.vue";
export default {
  name: "app",
  components: {
    samples,
    msg
  },
  data: () => {
    return {
      msg: "Hello World"
    };
  }
};
</script>

<style>
#app {
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  margin-top: 60px;
}
</style>

我想做的是使用msg组件，我想更改App.vue数据中的msg组件。但是，当我更改值时，Vue警告：

所以我不知道下一步该怎么做。请帮助我。

Answer 1

根本不允许您更改道具，只允许更改data变量。

要解决您的问题，这是您可以做的。在组件上实现v-model，因此msg始终保持同步，在App

App.vue

<template>
  <div id="app">
    <samples v-bind:msg="msg"></samples>
    <msg v-model="msg"></msg>
  </div>
</template>

<script>
import samples from "./components/samples.vue";
import msg from "./components/msg.vue";
export default {
  name: "app",
  components: {
    samples,
    msg
  },
  data: () => {
    return {
      msg: "Hello World"
    };
  }
};
</script>

msg.vue

<template>
 <div>
   <input type="text" v-model="selected" />
 </div>
</template>
<script>
export default {
 name: "msg",
 props: ["value"],
 computed: {
   selected: {
     get() {
       return this.value;
     },
     set(value) {
       return this.$emit('input', value)
     }
   }
 }
};
</script>

Answer 2

请勿使用v-model，而应使用$emit

消息组件

      Vue.component('msg',{
        props:["msg"],
        template: `<div>
          <input @keyup="changeMsg" :value="msg">
        </div>`,
        methods:{
          changeMsg:function(e){
            this.$emit("changed",e.target.value);
          }
        }
      });


    <msg @changed="msg = $event" :msg="msg"></msg>

Check Solution in CodePen

Answer 3

1。。v-model是什么？

<input v-model="msg" />

基本上会转换为

<input :value="msg" @input="msg = $event.target.value" />

2。 data与props

2.1 data应该是独立的，而props是从父母那里传递的。
2.2 data应该在组件内是可变的，props不应是可变的。为什么？由于2.1。

3。 mutating a prop locally is considered an anti-pattern in Vue 2

结果：这是我从您的代码中仅更改了两行代码的解决方案：

App.vue

<template>
  <div id="app">
    <samples v-bind:msg="msg"></samples>
    <msg :msg="msg" @update:msg="msg = $event"></msg> // changed this line
  </div>
</template>

msg.vue

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

Answer 4

一个简单的解决方案是使用v-bind.sync。单击链接查看文档和用法。使用此功能，您需要更改您的 2行代码以使其起作用：

在 App.vue 中：

change
<msg :msg="msg"></msg>
to
<msg :msg.sync="msg"></msg>

在 msg.vue 中：

change
<input type="text" v-model="msg" />
to
<input type="text" @input="$emit('update:msg',$event.target.value)" />

但是，这个是not recommended by Vue

Vue中双向绑定道具的正确方法是什么？

4 个答案: