在 Vuejs 中同步一个 props

Question

我正在尝试在vue.js 中同步父母和孩子之间的道具。

我有一个父组件，其中包含一个带有道具的子组件。当 parent 中的 prop 发生变化时，child 中的 prop 也会更新，当 child 中的 prop 发生变化时，parent 也会更新。

我从这个例子开始：

我的组件挂载的html

<div>
   <div id="app">
   </div>
</div>

还有父母+孩子：

Vue.component('myinput', {
   template: '<div><input v-model="mytext" /></div>',
   props: ['text'],

   data() {
      return {
         mytext: this.text
      }
   }
})

const vm = new Vue({
   el: '#app',
   template: '<div> <myinput :text="mytext"></myinput> <p> {{mytext}} </p></div>',

   data() {
      return {
         mytext: "Hello World!"
      }
   }
});

由于我无法改变道具，我需要一个本地副本 [Example Codepen]。

如果我想让我的父组件在子组件发生变化时更新，我需要$emit这个值。

为此，我在子组件中围绕mytext 创建了一个包装器：

computed: {
     wrapperMyText: {
       get() {
         return this.mytext;
       },
       set(v) {
         this.mytext = v;
         this.$emit('update:text', v);
       }
     }

我在模型中使用 wrapperMyText。 [Example Codepen]

现在，如果我想以另一种方式绑定（父母对孩子），我需要在孩子中添加一个观察者。

watch: {
     text(v) {
       this.mytext = v;
     }
   },

[Example Codepen].

在示例中，只有一个 prop，我需要创建一个 watcher 和一个计算属性。如果我有 5 个属性，我将需要 5 个观察者和 5 个计算属性。这意味着组件代码被所有这些东西污染了（代码太多）。所以我的问题是：

这是同步道具的标准模式吗？
在这种情况下使用商店（如 vuex）更好吗？
为什么做一个简单的案例需要这么多代码？

经过反思，我似乎正在尝试使用属性重新编码 v-model。

Answer 1

单个计算属性将完成您尝试的所有操作。

Vue.component('myinput', {
   template: '<div><input v-model="wrapperMyText"></div>',
   props: ['text'],
   computed: {
     wrapperMyText: {
       get() { return this.text;},
       set(v) { this.$emit('update:text', v);}
     }
   }
})

这是你的updated pen。

所以回答你的问题：

1. 这是标准模式。
2. 如果您将状态放入 Vuex，您的输入组件将不再可重用。
3. 您不需要所有这些代码。