ホーム

転職ドラフト(次回10/20)

VueのPropsの使い方と基本的な書き方

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

⇨ Vue 記事の目次はこちら

Vue の Props の使い方と基本的な書き方について書いていきます。

環境
Nuxt2.15.7

目次

  1. Props の基本的な書き方
  2. 解説
  3. 最後に、全体のコード

Props の基本的な書き方

subtitle という名前の props を使う場合

Children

export default {
  props: {
    //subtitleという名前のpropsがくる
    subtitle: {
      type: String,
      default: ''
    }
  }
};

Parent

<Children subtitle='サブタイトル' />

親で作成した変数を渡したい時は v-bind を使う。

⇨Vue の v-bind とは?基本的な使い方について

<Children :subtitle="subtitle" />

解説

データは親から子へ送る

親で子コンポーネントを呼び出しているところに、props 名=○○ と書きます。

<Children subtitle='サブタイトル' />

子ではデータの受け皿を用意しておく

子コンポーネントでは、script の中を見れば、props はこういった名前で来る前提で作っているということが分かるようになっています。

export default {
  props: {
    //subtitleという名前のpropsがくる
    subtitle: {
      type: String,
      default: ''
    }
  }
};

また、この props を利用して computed で計算をしたり、

⇨Vue の 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 から頂ければ幸いです。

それでは!