適切なvueJSデータと小道具を同期する方法

Question

ブログポストの表示/編集を可能にするVueJSアプリを考えてみましょう。

• "blogpostを編集"をクリックすると、現在のblogpost（通常のjsオブジェクト）を編集するためのモーダル（Vueコンポーネント）が表示されます。
• 私は現在のblogpostをpropとしてmodal-componentに渡します。
• Modalコンポーネントには、blogpost-attributesで設定する必要があるフォームフィールドがいくつかあります。
• しかし、Vue 'way'は、ユーザーがフォームフィールドを変更したときに更新されるように、フォームフィールドを作成するモデルとして機能するModalコンポーネント上にdataオブジェクトを持つことです。

問題：ブログ投稿は、フォームフィールド

ブログ投稿を移入

• ：どのように私はそのようモーダル成分のdata分野へpropとして渡されるブログ投稿を接続してくださいフォームフィールドの更新時に更新される

これを行うには正しいVue方法はありますか？

Answer 1

あなたはそれをやっての3（少なくとも）の方法があります：あなたがやっているのと同様に、prop属性を介してデータを接続し、それに.sync属性を追加

1）。このようにして、フォーム上のデータが変更されると、コンポーネント上で自動的に変更されます。この解決策の問題点は、更新が自動的であることです。検証が失敗した場合や、ユーザーが変更を保存せずにモーダルを閉じた場合、これらは保存されます。例：https://jsfiddle.net/Lz3aq64f/

2）それは保存されますときにそれを行うための他の方法は、保存された情報とイベントを$dispatchするモーダルを得ています。 blogpost要素はこのイベントをリッスンし、それに応じて動作する必要があります。ブログ投稿のコンポーネントとモーダル・コンポーネントは、同じ階層にない場合は、物事はもう少し複雑になります

this.$on('update-post', function(title, author) { 
    this.title = title; 
    this.author = author 
}); 

、および：ブログ投稿で

this.$dispatch('update-post', this.title, this.author); 

：モーダルで

おそらく、プロキシとして機能するためには、共通の親要素が必要です。 modal要素dispatchingを考えてください。#app要素は$onでキャッチしてから、$broadcastをblogpost要素に渡します。

3）vuexのようなものを使用して、状態の中央リポジトリとして機能します。私はあなたのアプリケーションがどれだけ大きいか分かりませんが、これは最もきれいな方法です：http://vuex.vuejs.org/en/index.html

幸運！