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

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

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

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

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

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

# 親コンポーネント

codesandbox

<template>
  <div id="app">
    <p>入力してね</p>
    <input v-model="text" />
    <HelloWorld :msg="text" />
  </div>
</template>

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

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      text: "",
    };
  },
};
</script>

今回は動的な値を取り上げたいため親コンポーネントでにてinputタグで入力欄を作成して、そこへ入った値はv-modelでdata内に入った値として変更できるようになります。
変更した値は:msgとして子コンポーネントへ渡されるのですが、:←の書き方はv-bindを省略するような書き方です。
親コンポーネントから子コンポーネントへ値をpropsで渡す場合v-bindは必須となります。

# 子コンポーネント

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
};
</script>

先ほど親コンポーネント内で送った値をpropsにて受け取ります。
そうしてタグ内にキャメルケースで親コンポーネントの値を表示できるようになります。

# まとめ

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