CodeGridのVue.jsのv-withの使い分けの説明がわかりません。

Question

CodeGridのVue.jsでコンポーネントとイベントの使い方について疑問があります。v-withの使い分けです。

Vue.jsを使いこなす - イベント経由のやり取り | CodeGrid

上記はメモを残せるアプリで、青枠はコンポーネント化したものです。赤枠はそのコンポーネントを入れ込んだ親コンポーネントです。メモの情報は親コンポーネントであるappが持っています。

  <div id="app" v-cloak>
    <section v-component="app-editor"></section>
    <section v-component="app-memolist" v-with="memos: memos"></section>
  </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を使っているのかがわかりません。わざわざ使い分けているように思えました。
この理由を教えて下さい。

ご回答、よろしくお願い致します。

Answer 1

現在のバージョンではv-withは使わずに、propsを使うみたいでした。知る必要がなくなってしまったので、この質問は解決済みに致します。