vue.jsは難しい

Posted on by fujifuji2

どうも、こんにちは。
通勤や家にいる間SEVENTEENのバラエティーを見まくっている今日この頃。
アマゾンプライムで気になる作品が公開されたので見ました。
それは

シャーロックという海外ドラマです。
この段階でピンとこられた方がいると思いますが、
そう。シャーロック・ホームズとジョン・H・ワトソンを主人公としたミステリードラマです。
この作品、シャーロキアンの監督が作られたこともあり、評価がすごい高いです。
自分も実際シーズン４まで3日ほどで見終わりました。
1話だいたい1時間30分ほどの作品ですが、見始めたら止めたくないくらい面白いです。
見れる限り何度か見返そうと思います。

vue.jsの話

さて、やっと本題のvue.jsのことを書こうと思います。
現在の案件で使用中のvue.jsなれないながらも親コンポーネントから子コンポーネントに値を渡す方法がやっと理解できたので
書いておこうと思います。

<template>
    <div>
        <child message="どうも"></child>
    </div>
</template>
<script>
import Child from './child.vue';
export default {
    components: {
        Child
    }
}
</script>
<template>
    <div>
        <p>{{ message }}</p>
    </div>
</template>
<script>
export default {
    props: ['message']
}
</script>

上がparent.vue(親)下がchild.vue(子)です。
親側で<child>タグの部分があると思うのですが、これが子コンポーネントの呼び出しタグです。
そこのmessage=”どうも”の部分でmessageという変数に”どうも”を渡しています。
componentsの部分で、子コンポーネントを指定します。
次に子側ですが、渡された変数をpropsで受け取ります。
すると、子コンポーネント側のhtmlで親側で定義されたデータが使用可能になり、子側で”どうも”と表示できるようになります。
componentとpropsの使い方がいまいち自分で理解できていなかったのでメモとしておいておきます。
何かの参考になれば幸いです
おしまい