Question

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

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

我从这个例子开始：

我的组件安装的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]

在这个例子中，只有一个道具，我需要创建一个观察者和一个计算属性。如果我有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。

所以回答你的问题：

这是一种标准模式。
如果您将状态置于Vuex中，则您的输入组件将不再可重复使用。
您不需要所有代码。

在Vuejs中同步道具

1 个答案: