【Vue】propsとemitをシンプルなサンプルで理解を深める

どーも、ぐるたか@guru_takaです。

Vueのpropsとemitを完全に理解すべく、簡単なサンプルを作ってみました。イメージはこんな感じ!

親から子にmsgを渡して、表示。子のボタンをクリックすると、親要素がカウントアップされる仕様になってます。

さっそく簡単にまとめていきます!

ソース

まずはsrcフォルダ構成とソースの紹介です。

フォルダ構成
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── ParentMsg.vue
    └── main.js
App.vue
<template>
  <div id="app">
    <p>{{count}} 回、子供のボタンが押されました</p>
    <ParentMsg msg="Hello World" @ChildBtnClick="increment" />
  </div>
</template>

<script>
import ParentMsg from './components/ParentMsg.vue'

export default {
  name: 'app',
  data () {
    return {
      count: 0
    }
  },
  components: {
    ParentMsg
  },
  methods: {
    increment () {
      this.count++
    }
  },

}
</script>
component/ParentMsg.vue
<template>
  <div>
    <h1>親から渡されたMSGは"{{ this.msg }}"です</h1>
    <button @click="CountUp">カウントアップ</button>
  </div>
</template>

<script>
export default {
  name: 'ParentMsg',
  props: {
    msg: String
  },
  methods: {
    CountUp () {
      this.$emit("ChildBtnClick");
    }
  },
}
</script>

処理の概要はこんな感じ!

  • 親からmsgを子コンポーネントに渡して表示
  • 親が子コンポーネントのボタンクリックを監視
  • 子コンポーネントのボタンがクリックされると、数字が+1される

propsについて

propsを簡単にまとめると、親から子にパラメーターを渡せるようになります。

サンプルでpropsに関係しているコードを抜粋したものがこちら!

component/ParentMsg.vue
export default {
  name: 'ParentMsg',
  props: {
    msg: String
  },
}
App.vue
<template>
  <div id="app">
    <ParentMsg msg="Hello World" @ChildBtnClick="increment" />
  </div>
</template>
子コンポーネントでは、props: { msg: String },で、パラメーターの受け皿を用意。親はmsg="Hello World"のように、データを渡せばOKです!

今回は基本的な型をStringと指定しただけですが、他にも色々あります。

propA: Number,

// 複数の型の許容
propB: [String, Number],

// 文字列型を必須で要求する
propC: {
type: String,
required: true
},

// デフォルト値つきの数値型
propD: {
type: Number,
default: 100
},

引用:プロパティ | 公式

こんな感じで、デフォルト設定(default)や型必須(required)もできます。用途に合わせて、お使いください!

emitについて

emitを簡単にまとめると、親が子のイベントを監視したり、子のデータを使ったりできます。

子コンポーネントでemitの重要な部分はこちら!

component/ParentMsg.vue
<template>
  <div>
    <button @click="CountUp">カウントアップ</button>
  </div>
</template>

...
  methods: {
    CountUp () {
      this.$emit("ChildBtnClick");
    }
  },
...

そして親側で重要な部分は、以下のようになります。

App.vue
<template>
  <div id="app">
    <p>{{count}} 回、子供のボタンが押されました</p>
    <ParentMsg @ChildBtnClick="increment" />
  </div>
</template>

...

export default {
  name: 'app',
  data () {
    return {
      count: 0
    }
  },

...

  methods: {
    increment () {
      this.count++
    }
  },

...

こんな流れで処理されます。

  • ボタンをクリック→CountUp関数が発火
  • ChildBtnClickという名で親は子のイベント監視
  • ChildBtnClickが発火(子のボタンがクリック)→increment関数が発火

ここで子コンポーネントのデータを親にパスしたい時は、this.$emit("ChildBtnClick", { num: 100 });みたいに、emitの第2引数に値を入れましょう!

複数の値を渡したい場合は、オブジェクト型にして、複数の情報を入れること第3引数に渡しても動かないので注意して下さい

続いて、親側で子コンポーネントのデータを使う際は、以下のように第1引数が入ること前提でメソッドを定義しましょう。

App.vue
  methods: {
    increment (el) {
      this.count += el.num
    }
  },

後は子コンポーネントのデータを好きなようにすればOKです。

ここでの例だと、子コンポーネントからクリックする度に、100ずつカウントアップする処理になってます!

参考リンク

参考 コンポーネントの基本Vue.js | 公式

コメントを残す