vue.jsの同じレベルのコンポーネント間の双方向バインディング

Question

先読みを使用している間、私は2つの先読みの検索語の間に2つのバインディングを行うことができます。したがって、基本的にユーザーが入力している検索ボックスに関係なく、異なるエンドポイントからのデータですか？

<typeahead ep="http://localhost:8080/ep1"></typeahead> 
<typeahead ep="http://localhost:8080/ep2"></typeahead> 

Answer 1

はい。両方のコンポーネントに同じ値を渡すだけです。あなたのコンポーネントで次に

<typeahead ep="foo" v-model="someValue"></typeahead> 
<typeahead ep="bar" v-model="someValue"></typeahead> 

ときにバックの両方が更新されます親に渡しますthis.$emit値。

ここでは非常に最小限の例です：

Vue.component('typeahead', { 
    template: '<div><input v-model="displayValue"> on {{ endpoint }}</div>', 
    props: { 
    value: String, 
    endpoint: String, 
    }, 
    computed: { 
    displayValue: { 
     get() { 
     return this.value 
     }, 
     set (value) { 
     this.$emit('input', value) 
     }, 
    }, 
    }, 
}) 

、ここでそれはなど、あなたが子供を変更すると必ず親データの更新を行うこと、親から値を変更するようないくつかの一般的なシナリオとフィドルにある：https://jsfiddle.net/crswll/tLmszrp2/