0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

propsと$emitによるデータのやりとり

Last updated at Posted at 2021-06-05

#はじめに
Vue.jsは1つのコンポーネントで実装するよりも、粒度に応じて複数のコンポーネントに分解して実装する方がよいとされている。そのようが、ソースコードの可読性やメンテナンス性、コンポーネントの再利用性も活かすことができて便利なためだ。だが、複数のコンポーネント間でデータのやり取りも必要不可欠になり、そこがVue.jsの扱いで最も難しいとされる箇所の1つなのではないかと思う。
そこで今回は自分が忘れてしまってからも当記事を確認するだけですぐに思い出せるように、簡単に実装例も交えつつ、「props」「emit」について取り上げます。

#emit, propsとは
コンポーネント間には親と子という概念がある。片方のコンポーネントがもう片方のコンポーネントを取り込み(import)するとき、importする側を「親」,importされる側を「子」と呼ぶ。そして、親から子へデータを伝達する手段を「props」。子から親へデータを伝達する手段を「emit」としている。

#propsの使い方(親から子へデータを送る)
V-bind(:)を経由して親から子へデータを送信して、子でpropsを使ってプロパティという形で親からのデータを受け取って利用できる。

親からv-bindでデータを子へ送る

Parents.vue
<template>
  //親で扱ってるデータをバインドしてそのプロパティとして子へデータ送る
  <Child
   :param0=item
   :param1=value
  />
<template>
<script>
  import Child from './components/Child.vue'
  components: {
    Child
  },
</script>

子でprops内のプロパティをという形で親が飛ばしたデータを受け取ってdataのように利用できる

Child.vue
//親から送られてきたデータを受け取りdataのように使う
props: [item,  value]

#emitの使い方(子から親へデータ送る)
emitを使ったカスタムイベントで子から親へデータが渡される。
カスタムイベントとは、子コンポーネント内「@click」のイベントがクリックされると同時に発火する$emitを使用したイベントのこと。子コンポーネント内で親に送りたいデータを引数にした「$emit」が発火すると、親でそのイベントが違う名前のmethodsに渡されて、そのmethodsが発動する。つまり、子で発火してその引数がデータとして親に渡されて親のmethods内で関数として使われる。
子から親へデータを渡すには、@click@changeなどのなにかしらのイベントが必要になってくる。

Child.vue
<template>
  <div>
    <p>child_num: {{ child_num }}</p>
        //@clickイベントでmethodsのsendが発動
    <button @click='send'>親に値を渡す</button>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      child_num: 0
    };
  },
  methods: {
        //関数内のカスタムメソッド$emitが発火し、引数として親に送りたいデータを渡すことができる
    send() {
      this.$emit("my-click", this.child_num);
    }
  }
};
</script>
</script>
Parents.vue
<template>
  <div>
    <p>parent_num: {{ parent_num }}</p>
        //子のカスタムメソッドを親の関数として使う
    <Child @my-click='reflectNum'/>
  </div>
</template>

<script>
import Child from './components/Child.vue'
export default {
  data: function() {
    return {
      parent_num: 100
    }
  },
  components: {
    Child
  },
  methods: {
        //子のカスタムイベントで引数にしたデータはこちらで受け取る(子から親へデータ渡す)
    reflectNum(value) {
      this.parent_num = value
    }
  }
}
</script>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?