アウトプットするブログ

ブログの投稿ログ

2021年
9月
8月
7月
6月

Vueコンポーネント間の値をやりとり その2

JSフレームワークを使用するときにつまずきがちなものの一つとして

親コンポーネント→子コンポーネント

のやりとりについて書いていきたいと思います。

子コンポーネント→親コンポーネント

最初に子コンポーネント→親コンポーネントに値を渡したい場合はemitを用いていきます。

codesandbox

子コンポーネント
<template>
  <div class="hello">
    <button @click="submit">押してね</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    submit() {
      this.$emit("toggle");
    },
  },
};
</script>

クリックイベントを作成し、関数内で$emitを使用します。
これは親コンポーネントへ送る際に使用するvueの記述となります。

親コンポーネント
<template>
  <div id="app">
    <p v-if="isHide">表示/非表示</p>
    <HelloWorld @toggle="hide" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      isHide: true,
    };
  },
  methods: {
    hide() {
      this.isHide = !this.isHide;
    },
  },
};
</script>

子コンポーネントタグ内で先ほどemitの引数に入れた値を定義し、新たに関数を作成します。
その関数で値をbooleanで定義することで、ボタンを押すと表示/非表示ができるようになります。

まとめ

今回は子コンポーネントから親コンポーネントへ値を受け渡す方法を書きました。
次回はVuexを使った状態管理なども紹介していけたらと思っています。
以上です！