Vue.js propsの使い方~親から子へ値を渡す方法~

propsを使い親から子へ値を渡す

はじめに

SPAでページを作成していた際に、親コンポーネントから子コンポーネントへ値を渡すPropsを使用しました。

Propsについて簡単にまとめましたので、こちらを読んでいただければPropsについて基本的な使い方はわかるかと思います。

 

Propsとは

簡単にいうと、親コンポーネントから子コンポーネントに文字列、数値、配列やオブジェクトなどの値を渡すことができるものです。

 

基本的な使い方

今回はページのコンテンツタイトルをコンポーネント化した簡単な例です。

(親)

 
 <template>
  <ContentsTitle title="about" />
 </template>
 <script>
 import Vue from 'vue'
 // 子コンポーネントをimport
 import ContentsTitle from '../components/ContentsTitle.vue'

 Export default{
 // コンポーネントの指定
 components:{
 ContentsTitle
 }
 }
 </script>
(子)
 
 <template>
 <div class="contents-title">
  <!-- 親コンポーネントから受け取ったデータを表示 -->
  <h1>{{title}}</h1>
 </div>
 </template>
 <script>
 export default{
 // 親コンポーネントからデータの受け取り
 props:['title']
 }
 </script>
 
 
親は子コンポーネントをimportし、{{ title }}に"about"という文字列を渡して表示します。
 

コンポーネントの再利用

 
 <title title="about" />
 <title title="news" />
 
今回のようなタイトルのコンポーネントの場合、1ページにいくつもコンテンツがあり、都度同じスタイルでコンテンツタイトルを表示している場合、子へ渡す値を変更するだけで再利用が可能です。
 

v-bindを利用した場合


 <template>
 <div id="app">
 <title v-bind:title="data_title" />
 </div>
 </template>
 <script>
 import ContentsTitle from "./components/ContentsTitle.vue";

 export default {
 name: "App",
 components: {
  ContentsTitle,
 },
 data() {
  return {
  //ここに指定した値をviewに表示する
  data_title: "news",
  };
 },
 };
 </script>

Vueのデータプロパティを利用して値を渡せます。その際はバインドをする必要があるのでtitleの前にv-bindを設定します。

 

PropsTypeを設定

 ContentsTitleコンポーネントpropstitleには、文字列が入るのでまずtypeStringを設定します。Stringの先頭文字は大文字です。

小文字にするとエラーになります。

これでtitleにはString(文字列)が入ってくることを宣言しています。

違うタイプを渡すと、タイプが違うとGoogleコンソール上で警告が出ます。

typeの種類

String

文字列

Number

数値型

Array

配列型

Boolean

真偽値

Object

オブジェクト型

Function

関数

Date

日付

null

全て許容

undefined

全て許容

 

Propsのデフォルト値の設定

 
 <script>
 export default{
  props: {
  name: {
   type: String,
     //デフォルト値を指定
   default: "about",
  },
 },
 }
 </script>
 

デフォルト値を指定せず、子コンポーネントに値を渡していない場合、

コンポーネントには何も値が入っていない状態です。

そのような場合は何も表示されません。

Propsを必須にするにはrequiredを使用します。

 
 <script>
  props: {
  name: {
    type: String,
    //trueを指定することで、propsが必須となります。
   required: true,
  },
 },
</script>
 

required: trueを指定し、子コンポーネントに値を渡していない場合、Googleコンソール上で警告が出ます。

デフォルト値を指定している場合はpropsに値が必ず入るので、required: trueにしとく必要はありません。

 

Array型とobject型の注意点

ArrayObject型の場合は、defaultの設定値は関数にする必要があります。

 

 

参考

https://reffect.co.jp/vue/vue-js-master-props-for-beginner

 https://jp.vuejs.org/v2/guide/components-props.html