Vue3 组件之间传值及适用场景分析

<!-- ChildComponent.vue -->
<script setup>
// 组合式 API（推荐）
const props = defineProps({
  title: {
    type: String,
    default: '默认标题'
  },
  count: {
    type: Number,
    required: true
  }
});
</script>
<template>
  <div>{{ title }} - {{ count }}</div>
</template>

<!-- 选项式 API -->
<script>
export default {
  props: {
    title: String,
    count: {
      type: Number,
      required: true
    }
  }
}
</script>

<template>
  <ChildComponent 
    :title="'Hello Vue3'" 
    :count="42"
  />
</template>

<!-- ChildComponent.vue -->
<script setup>
const emit = defineEmits(['updateCount']); // 定义事件
function increment() {
  emit('updateCount', 10); // 触发事件并传递数据
}
</script>
<template>
  <button @click="increment">增加计数</button>
</template>

<template>
  <ChildComponent 
    :count="count"
    @updateCount="count = $event" <!-- 接收子组件传递的值 -->
  />
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<!-- ChildComponent.vue -->
<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
function updateValue(newValue) {
  emit('update:modelValue', newValue);
}
</script>
<template>
  <input 
    :value="modelValue" 
    @input="updateValue($event.target.value)"
  >
</template>

<template>
  <ChildComponent v-model="text" /> <!-- 自动同步数据 -->
</template>
<script setup>
import { ref } from 'vue';
const text = ref('初始值');
</script>

<!-- AncestorComponent.vue -->
<script setup>
import { provide, ref } from 'vue';
const theme = ref('dark');
provide('theme', theme); // 提供数据
</script>

<!-- ChildComponent.vue -->
<script setup>
import { inject } from 'vue';
const theme = inject('theme'); // 注入数据
</script>
<template>
  <div :class="theme">当前主题：{{ theme }}</div>
</template>

npm install pinia

// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

<template>
  <div>Count: {{ counterStore.count }}</div>
  <button @click="counterStore.increment()">+1</button>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
</script>