Vue
VueのPropsの使い方と基本的な書き方
いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。
オススメ本
Vue の Props の使い方と基本的な書き方について書いていきます。
環境
Nuxt2.15.7
Props の基本的な書き方
subtitle という名前の props を使う場合
Children
export default {
props: {
//subtitleという名前のpropsがくる
subtitle: {
type: String,
default: "",
},
},
}
Parent
<Children subtitle="サブタイトル" />
親で作成した変数を渡したい時は v-bind を使う。
<Children :subtitle="subtitle" />
解説
データは親から子へ送る
親で子コンポーネントを呼び出しているところに、props 名=○○ と書きます。
<Children subtitle="サブタイトル" />
子ではデータの受け皿を用意しておく
子コンポーネントでは、script の中を見れば、props はこういった名前で来る前提で作っているということが分かるようになっています。
export default {
props: {
//subtitleという名前のpropsがくる
subtitle: {
type: String,
default: "",
},
},
}
また、この props を利用して computed で計算をしたり、
template に表示したりすることが可能です。
<template>
<p>{{ subtitle }}</p>
</template>
script 内でこの props を使うときは、
this.subtitle
となり、this が必要になるので注意してください。
最後に、全体のコード
親コンポーネント
<template>
<div>
<h1>親コンポーネント</h1>
<Children subtitle="サブタイトル" />
<Children :subtitle="subtitle" />
</div>
</template>
<script>
import Children from "@/components/Children";
export default {
components: {
Children
},
data() {
return {
subtitle: "サブタイトル2"
};
}
};
</script>
子コンポーネント
<template>
<div>
<h2>子コンポーネント</h2>
<p>{{subtitle}}</p>
</div>
</template>
<script>
export default {
props: {
subtitle: {
type: String,
default: ""
}
}
};
</script>
まとめ
以上、Vue の Props の基本的な書き方について の記事でした!!
苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。
それでは!