VueJSコンポーネントからのデータの共有

Question

VueJSアドレス参照コンポーネントがあります。アドレスの一部ではない（Twitterのハンドルのように）結果の中に返されたいくつかの余分なデータがあり

<p>{{ result.formatted_address }}</p> 

：私のテンプレートインサイド

Vue.component('address-lookup', 
{ 
    template: '#address-lookup-template', 
    data: function() 
    { 
     return { 
      address: {'name': '', 'town:': '', 'postcode': ''}, 
      errors: {'name': false, 'town': false, 'postcode': false}, 
      states: {'busy': false, 'found': false}, 
      result: {} 
     } 
    }, 
    methods: 
    { 
     findAddress: function(event) 
     { 
      if(typeof event === 'object' && typeof event.target === 'object') 
      { 
       event.target.blur(); 
      } 

      $.ajax(
      { 
       context: this, 
       url: '/lookup', 
       data: 
       { 
        'name':  this.address.name, 
        'town':  this.address.town, 
        'postcode': this.address.postcode 
       }, 
       success: function(data) 
       { 
        this.states.busy = false; 
        this.states.found = true; 
        this.address.name = data.name; 
        this.result = data; 
       } 
      }); 
     }, 
     reset: function() 
     { 
      this.states.found = false; 
      this.result = {}; 
     } 
    } 
}); 

私は、結果そうのような束縛しましたフォームの別の部分で発生します。私のフォームがどのように構成されているかという理由から、これらの入力を同じテンプレートに含めることはできません。

私はこれらの入力をバインドする方法を見つけましたが、いくらか「ハッピー」と感じました。

<input type="text" name="twitter" v-model="$refs.lookupResult._data.result.twitter"> 

すべて正常です。

私の問題は、新しいレコードを作成するコンテキストで、時には編集のコンテキストで、ときどき大きなテンプレートの一部としてフォームが含まれることです。レコードを編集するときに、検索コンポーネントが削除されます（サーバー側でifを使用しているため、テンプレートはまったく読み込まれません）。このとき、このエラーが発生します。

$refs.lookupResult._data.result.twitter": TypeError: Cannot read property '_data' of undefined 

これは意味があります。 lookupResultは、私は、テンプレートが含まれている場合に定義され、編集するとき、私はこの行を削除しています：

<address-lookup v-ref:lookup-result></address-lookup> 

私は再びサーバー側を使用して、v-model属性のない余分な各入力のバージョンを含めることにより、その周りに働いてきましたif。しかし、かなりの数があり、ちょっと面倒です。

これをよりうまく達成するために私が使用できるよりクリーンなアプローチがありますか？

Answer 1

私はあなたのレイアウトの階層は分かっていませんが上では指摘されていませんが、アドレスルックアップコンポーネントがあなたの親の子だと仮定し、実際にはその親でアドレス検索の結果が必要です例えば：あなたの親のVUEデータフックに例えば「アドレス」を定義することで双方向に

<parent-component> <!-- where you need the data --> 
    <address-lookup></address-lookup> <!-- where you lookup the data --> 
</parent-component> 

その後、あなたは、単に、データの小道具を渡すことができ、トップダウンのみ（デフォルト）のいずれかまたは：

// parent's data() function 
data = function() { 
    return { 
    address: {} 
    } 
} 

// parent template, passed address with .sync modifier (to make it bi-directional) 
<parent-component> 
    <address-lookup :address.sync='address'></address-lookup> 
</parent-component> 

// have the props accepted in the address look up component 
var addressComponent = Vue.extend({ 
    props: ['address'] 
}) 

をあなたの$ .ajaxの成功関数で、必要な小道具を単に設定してくださいthis.address。もちろん、エラー、結果、状態など、必要なすべての小道具でこれを行うことができます。親の1つのキーにネストできれば、代わりに4つの要素すべてを含むオブジェクトの単一のキーを渡すことができます別々に4つすべての