Web開発

【Vue + vue-cli】props、$emitについて

目次

1. コンポーネント間のデータの受け渡し
2. propsについて
3. $emitについて
4. まとめ

今回はVueにおけるpropsと$emitの概要と使い方について解説していきたいと思います。

この二つもVueを学ぶ上で欠かせない知識だったので、使用例も含めておさえていきたいと思います。

なお、使用データは以下の記事と同じものを使用するため、こちらからご覧いただくことをお勧めします。

https://www.dailyupblog.com/web_development/742/

なお、使用データに関しては、vue-cliを使用しています。

それではいきましょう！

コンポーネント間のデータの受け渡し

Vueでの開発では、主にコンポーネントを作って構成していきます。

その中で、コンポーネント内で別のコンポーネントを取り込んで（インポート）使う、ということをしていくと思います。

ここにおける取り込みを行う側（インポートする側）のコンポーネントのことを親コンポーネント、取り込まれる側（インポートされる側）のコンポーネントのことを子コンポーネントといいます。

その際に、子コンポーネントで扱っているデータを親コンポーネントでも扱いたいという場面が当然出てくると思います。

その逆も然りです。

ですが、そのままでは親コンポーネントと子コンポーネント間ではデータは共有されません。

そのため、親子のコンポーネント間でデータを受け渡しができるようにしてあげなければなりません。

そこで使うのが、propsと$emitです。

propsについて

propsは親コンポーネントから子コンポーネントへデータを受け渡す機能を持っています。

以下使用例です。

「pages」フォルダのTop.vueを開いてください。

下記のように記述してください。

<template>
  <main>
    <div>
      <Child msg="Hello World" />
    </div>
  </main>
</template>

<script>
import Child from '../components/Child.vue';
export default {
  data () {
    return {
      data: ""
    }
  },
  components: {
    Child
  }
}
</script>

<style scoped>
main {
  height: calc(100vh - 152px);
  padding: 3% 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
h2 {
  margin: 0;
}
</style>

続いて、「components」フォルダ内にインポートする子コンポーネントファイルとして、Child.vueを作成してください。

そして、Child.vue内には下記のように記述してください。

<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      default: 'テキストが入ります。'
    }
  },
  data () {
    return {
    }
  }
}
</script>

<style scoped>
</style>

上記はとてもシンプルな例であり、親コンポーネントから文字列を渡して、子コンポーネント側でそれを表示する例です。

細かくみていきましょう。

まず、子コンポーネント側のインスタンス内で、「props」オブジェクトを記述しており、その中に名前と型を定義しています。

下記の箇所です。

  props: {
    msg: {
      type: String,
      default: 'テキストが入ります。'
    }
  },

デフォルトで表示されるテキストも設定しています。

そしてHTML内にこのpropsが表示される領域を記述しています。

<p>{{ msg }}</p>

続いて、親コンポーネントをみてみます。

親コンポーネントでは下記のように、インポートしたChild.vueの呼び出しタグ内にpropsで受け渡すデータを記述しています。

<Child msg="Hello World" />

このようにすることで、propsにて親コンポーネントから子コンポーネントへデータを受け渡すことができます。

これで、画面で確認すると下記のように「Hello World」が表示されているはずです。

$emitについて

$emitは子コンポーネントから親コンポーネントへデータを受け渡す機能を持っています。

以下使用例です。

Top.vueを開いてください。

これには下記のように記述してください。

<template>
  <main>
    <div>
      <p>子コンポーネントから取得した値：{{ data }}</p>
      <Child @send="getData" />
    </div>
  </main>
</template>

<script>
import Child from '../components/Child.vue';
export default {
  data () {
    return {
      data: ""
    }
  },
  components: {
    Child
  },
  methods: {
    getData: function (value) {
      this.data = value;
    }
  }
}
</script>

<style scoped>
main {
  height: calc(100vh - 152px);
  padding: 3% 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
h2 {
  margin: 0;
}
</style>

続いて、子コンポーネントとなるChild.vueに下記を記述してください。

<template>
  <div>
    <button @click="sendData()">親コンポーネントにデータを送る</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      childData: "Hello World"
    }
  },
  methods: {
    sendData: function () {
      this.$emit('send', this.childData);
    }
  }
}
</script>

<style scoped>
</style>

上記はボタンをクリックすると子コンポーネントから親コンポーネントに文字列が受け渡されて表示されるという簡単な例です。

詳しくみていきましょう。

子コンポーネント内で関数を定義しています。

その中で以下のように記述してあります

this.$emit('send', this.childData);

ここで$emitが使われています

$emitは親コンポーネントが子コンポーネントを監視したり、子コンポーネントのデータを使ったりすることができます。

$emit()では第一引数に親が子を監視するための名前を記述し、第二引数に渡すデータを入れてください。

続いて親コンポーネントを見てみます。

親コンポーネントでは、まず受け取ったデータを引数として渡されるメソッドを定義してください。

下記の部分です。

  methods: {
    getData: function (value) {
      this.data = value;
    }
  }

そして、この関数を子コンポーネントから受け取ったデータを渡して実行するために下記のように記述します。

<Child @send="getData" />

インポートしてきた子コンポーネントのタグに@send=”関数名”という形で関数を実行させています。

この際、sendの部分は子コンポーネントで指定した$emit()の第一引数が入ります。

これで、子コンポーネントのデータを親コンポーネントに受け渡して、ボタンクリックで表示させることができました。

画面で確認すると下記のように表示され、クリックで「Hello World」が表示されるはずです。

まとめ

今回はコンポーネント間でのデータの受け渡しを可能にするpropsと$emitについて、概要と使い方を開設いたしました。

この二つはvue開発でとても使用します。

例えば、APIによるデータの送信・取得などの際に、頻繁に使用するため、是非とも身につけたいところです。

今回はここまで！

お疲れ様でした！

以下、Vue公式の解説です。

プロパティ
https://jp.vuejs.org/v2/guide/components-props.html