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