Vue.jsのコンポーネント間でデータを受け渡す方法

親から小へデータを受け渡す方法 【 → 】

・子コンポーネント

Child.vue

<template>
  <!-- 親コンポーネントから値を受け取るための箱を用意する -->
  <p>{{ value }}</p>
</template>

<script>
export default {
  // 親コンポーネントから値を受け取る為に、propsを定義する（複数定義することも可）
  props: ["value"],
}
</script>

・親コンポーネント

Parent.vue

<template>
  <div>
    <!-- 子コンポーネント側で定義したpropsのプロパティに、
         データを入れて子コンポーネントへ渡す（動的に値を変更する場合は、「v-bind」を使う） -->
    <Child value="親から子へ"></Child>
  </div>
</template>

<script>
// 子コンポーネントをインポート
import Child from './components/Child'

export default {
  /* template内でコンポーネントが利用できるように、
     componentsプロパティに子コンポーネントをセット */
  components: {
    Child,
  }
}
</script>

子から親へデータを受け渡す方法 【 → 】

・子コンポーネント

Child.vue

<template>
  <div>
    <!-- 親コンポーネントから値を受け取るための箱を用意する -->
    <p>{{ value }}</p>
    <!-- ボタンを押した時に、親コンポーネント側でカスタムイベントを発火 -->
    <button @click="change">値を変更</button>
  </div>
</template>

<script>
export default {
  // 親コンポーネントから値を受け取る為に、propsを定義する（複数定義することも可）
  props: ["value"],
  methods: {
    change() {
      // 親コンポーネントへ値を送る為のカスタムイベントを作成
      this.$emit("receive", this.value = "子から親へ");
    }
  }
}
</script>

・親コンポーネント

Parent.vue

<template>
  <div>
    <!-- 子コンポーネントのボタンが押されると、
         親コンポーネントのカスタムイベントが発火する -->
    <Child value="親から子へ" @receive="changeValue"></Child>
  </div>
</template>

<script>
// 子コンポーネントをインポート
import Child from './components/Child';

export default {
  /* template内でコンポーネントが利用できるように、
     componentsプロパティに子コンポーネントをセット */
  components: {
    Child,
  },
  methods: {
    // 子コンポーネントで定義した$emitの第２引数を受け取る
    changeValue(value) {
      // 値を入れ替える
      this.value = value;
    }
  }
}
</script>

HTMLコードを子コンポーネントへ受け渡す方法 【 → 】

・子コンポーネント

Child.vue

<template>
  <div>
    <!-- 受け口としてslotタグを配置
         親コンポーネント側のHTMLがslotタグと置き換わる -->
    <slot></slot>
  </div>
</template>

・親コンポーネント

Parent.vue

<template>
  <div>
    <!-- 送り口として、コンポーネントタグ内にHTMLを記述 -->
    <Child>
      <h1>HTMLを</h1>
      <h2>子コンポーネントへ</h2>
    </Child>
  </div>
</template>

<script>
// 子コンポーネントをインポート
import Child from './components/Child';

export default {
  /* template内でコンポーネントが利用できるように、
     componentsプロパティに子コンポーネントをセット */
  components: {
    Child,
  },
}
</script>