在Vuejs中同步道具

Question

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

我有一个父组件，其中包含一个带有prop的子组件。当父母中的道具改变时，道具在小孩中更新，并且道具在小孩中改变时，父母被更新。

我开始用这个例子：

在我的组件安装

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

HTML和家长+孩子：

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个计算属性。这意味着组件代码被所有这些东西污染（代码太多）。所以我的问题是：

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

经过反思，似乎我试图用属性重新编码v模型。

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. 你不需要所有的代码。