Vue 组件通信

1. Props/Emit

<!-- 父组件 -->
<template>
  <child-component
    :message="message"
    @update="handleUpdate"
  />
</template>

<!-- 子组件 -->
<template>
  <div @click="handleClick">{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    handleClick() {
      this.$emit('update', 'new value')
    }
  }
}
</script>

2. Provide/Inject

// 父组件
export default {
  provide() {
    return {
      theme: this.theme
    }
  }
}

// 子组件
export default {
  inject: ['theme']
}

3. Vuex/Pinia

// Pinia Store
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    age: 0
  }),
  actions: {
    updateUser(payload) {
      this.name = payload.name
      this.age = payload.age
    }
  }
})