Vueのプロパティとカスタムイベント〜他のコンポーネントへのデータの受け渡し方〜

Hello Vue.js!!

今日は、Vue.jsチュートリアルの、プロパティとカスタムイベントの章を読んでみました。

コンポーネントという概念に触れるのは今回が初めてだったので、理解するのに結構苦労しました。

プロパティ

親コンポーネントから子コンポーネントへのデータの受けわたしは、プロパティを介して行うみたいです。

実際の開発では、文字列単体よりも、配列で渡すことが多いと感じたので、配列の受け渡しを試してみました。

例えば、子コンポーネント側に、PostTitleという名前のプロパティがあったとします。

そんな時に、PostTitleへ親コンポーネントの配列を渡すコードはこんな感じ。
v-bindは省略記法を使っています。

親から子にデータを渡す時は、上から下に落ちていくイメージで直感的だと感じました。
次は、若干複雑と言われがちなカスタムイベントのチュートリアルをやっていきます。

ソースコードを実行するとこんな感じ

Leave a Reply

Your email address will not be published. Required fields are marked *

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)