Vue
VueのPropsの使い方と基本的な書き方
いつもご利用ありがとうございます。このブログは、広告費によって運営されています。
オススメ本
Vue の Props の使い方と基本的な書き方について書いていきます。
環境
Nuxt2.15.7Props の基本的な書き方
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: "サブタイトル２"
};
}
};
</script>子コンポーネント
<template>
<div>
<h2>子コンポーネント</h2>
<p>{{subtitle}}</p>
</div>
</template>
<script>
export default {
props: {
subtitle: {
type: String,
default: ""
}
}
};
</script>まとめ
以上、Vue の Props の基本的な書き方についての記事でした！！
苦情、誤りに関する指摘は下の Twitter の DM から頂ければ幸いです。
それでは！
