【Vue.js】コンポーネント間でデータをやりとりする方法｜props・emit・storeの使い分け

<!-- ChildComponent.vue -->
<script setup>
const props = defineProps({
  message: { type: String, required: true },              // 必須
  size: { type: String, default: 'medium' },              // 既定値
  tags: { type: Array, default: () => [] }                // 配列・オブジェクトの既定値は、関数で返す
})
</script>

<template>
  <p :class="size">{{ message }}</p>
</template>

<!-- 親コンポーネント -->
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const parentMessage = ref('こんにちは')
</script>

<template>
  <ChildComponent :message="parentMessage" size="large" />
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps(['initialCount', 'size'])

// NG：props を直接書き換えると、警告が出る
// props.initialCount++

// OK：初期値として使うだけなら、コピーして自分の状態にする
const count = ref(props.initialCount)

// OK：加工して使うなら、computed にする
const normalizedSize = computed(() => props.size.trim().toLowerCase())
</script>

<!-- ChildComponent.vue -->
<script setup>
// 発行するイベントを宣言する（camelCase）
const emit = defineEmits(['itemSelected'])

function select(id) {
  emit('itemSelected', id)       // 追加の引数は、親のリスナーへ渡される
}
</script>

<template>
  <button type="button" @click="select(1)">選ぶ</button>
</template>

<!-- 親コンポーネント -->
<script setup>
function onSelected(id) {
  console.log('選ばれた id:', id)
}
</script>

<template>
  <!-- テンプレートでは、kebab-case で受け取る -->
  <ChildComponent @item-selected="onSelected" />
</template>

<!-- 親：共有する状態を持つ -->
<script setup>
import { ref } from 'vue'
import ItemList from './ItemList.vue'
import ItemDetail from './ItemDetail.vue'

const selectedId = ref(null)
</script>

<template>
  <!-- 兄弟の ItemList が選んだ id を、親が受け取り、兄弟の ItemDetail へ渡す -->
  <ItemList :selected-id="selectedId" @select="selectedId = $event" />
  <ItemDetail :item-id="selectedId" />
</template>

// stores/cart.js
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', () => {
  const items = ref([])
  const count = computed(() => items.value.length)

  function add(item) {
    items.value.push(item)
  }

  return { items, count, add }
})

<script setup>
import { useCartStore } from '@/stores/cart'

const cart = useCartStore()
</script>

<template>
  <!-- どのコンポーネントからでも、同じストアを使える -->
  <button type="button" @click="cart.add({ id: 1, name: '商品A' })">追加</button>
  <p>カート：{{ cart.count }}点</p>
</template>