CodeGridのVue.jsでコンポーネントとイベントの使い方について疑問があります。v-with
の使い分けです。
Vue.jsを使いこなす - イベント経由のやり取り | CodeGrid
上記はメモを残せるアプリで、青枠はコンポーネント化したものです。赤枠はそのコンポーネントを入れ込んだ親コンポーネントです。メモの情報は親コンポーネントであるapp
が持っています。
html
1 <div id="app" v-cloak> 2 <section v-component="app-editor"></section> 3 <section v-component="app-memolist" v-with="memos: memos"></section> 4 </div>
画面上のエディター部分はv-componentディレクティブを使っており、app-editor
でイベントadd:memo
を発火させて、それを親コンポーネントのapp
がキャッチします。実際にメモをデータに追加するのは、このイベントをキャッチしたapp
が行います。
元のデータに変更を加えるような処理は、イベントでのやり取りによって、適切な場所で処理できるようにするのが望ましいです。
イベントでデータをやり取りするメリットは上記のとおりです。イベントでやりとりするので、親のデータを継承する必要はないため、app-editor
にはv-with
ディレクティブを使用してはいません。では、なぜapp-memolist
にはv-with
が使われているのかは次の通りです。
一方、メモを表示する機能は、データに変更を加える機能ではありません。こういった場合にはv-withディレクティブを使って、表示するデータの参照を渡してあげることは、自然な方法だと言えます。
ですが、画面下部のapp-memolist
は表示だけでなく削除するイベントを通知するメソッドがあります。これは画面上部のapp-editor
と同じです。なのに何故v-with
を使っているのかがわかりません。わざわざ使い分けているように思えました。
この理由を教えて下さい。
ご回答、よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。