どうも。みずかず(@mizukazu_1)です。
今回はカスタムコンポーネントにpropsを設定してデータを渡す方法を書いていきます。
propsというものを使いコンポーネントに属性を通してテキストなどのデータを渡すことが出来るようになります。
使いこなせれば自作コンポーネントの幅が広がります。
カスタムコンポーネントの作り方が分からない場合には以下の記事が参考になりますので先に読んでおく事をオススメします。
propsとは
propsは親コンポーネントから子コンポーネントにデータを渡すために使用するものになります。
タグに属性を通してデータを渡すことが出来ます。
以下のような感じでtest-compというコンポーネントに対してtextという属性を用いてテスト！というテキストデータを渡しています。
<test-comp text="テスト！"></test-comp>カスタムコンポーネントにpropsを設定する
まずはカスタムコンポーネントにpropsを設定していきます。
<template>
<div>{{ text }}</div>
</template>
<script>
export default {
name: 'test-comp',
props: {
text: String
}
}
</script>
<style scoped lang="scss">
</style>scriptタグの中に注目です。
propsというプロパティがあるかと思います。
この中に実際に使うプロパティを書いていくわけですが、ここではtextというプロパティをString型で定義しています。
つまりこのtextは文字列のみを受け取るものになります。
このような感じでプロパティ名とデータが入ってくる型を指定してあげます。
templateではtextをそのまま表示しています。
propsで設定したtext経由でテキストを渡す
次にpropsで設定したtextに実際に文字列を渡してみます。
冒頭でも出てきましたが以下のような書き方でデータを渡すことが出来ます。
<test-comp text="テスト！"></test-comp>propsで設定したtextをコンポーネントの属性に指定して、ダブルクォーテーションで文字列を渡しています。
まとめ
- カスタムコンポーネント側でpropsを用いてプロパティを設定する。(同時に入ってくるデータの型を指定する)
- コンポーネントの呼び出し側でpropsで設定したプロパティを属性として使う
- 2の属性に対してデータを渡す。
大まかな流れとしてはこんな感じになると思います。
今回はテキストデータをそのまま表示するだけでしたが、そのデータを元に色々コンポーネントに機能を付けたりも出来そうですね。
自作するコンポーネントの幅が広がるのでpropsの使い方を覚えるのは必須だと思います。
似たようなもので$emitというものもあるので今度はそちらの記事を書いていこうと思います。
Vueの概要が分かる以下の記事もオススメなので良かったら読んでいってください。
最後まで読んでいただきありがとうございました！
スポンサーリンク
