javascript - Vue中双向绑定props的正确方式是什么？

Question

这里我有两个组件：

消息.vue

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

样本.vue

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

最后，

应用程序.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组件我想改变msgApp.vue的数据中的组件。但是当我更改值时，Vue 会发出警告：

所以我不明白下一步该怎么做。请帮助我。

Answer 1

一种简单的解决方案是使用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)" />

但是，这个不是 Vue 推荐的

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>

在 CodePen 中检查解决方案

Answer 3

1.是什么v-model？

<input v-model="msg" />

基本上会转译为

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

2. data对比props

2.1data应该是自包含的组件，而props从父级传递。
2.2data应该在组件内是可变的，props不应该。为什么？因为2.1。

3. 在 Vue 2 中，本地改变一个 prop 被认为是一种反模式

---

结果：这是我只更改了您的 2 行代码的解决方案：

应用程序.vue

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

消息.vue

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

Answer 4

你根本不允许改变道具，你只能改变data变量。

要解决您的问题，您可以这样做。在组件上实现 a v-model，因此msg始终保持同步，也在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>

消息.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>