<template>
  <ChildComponent :id="currentId" @childEvent="handleChild" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './Child.vue';

const currentId = ref<string>('001');
const handleChild = (msg: string) => {
  console.log('接收到子組件消息：', msg);
};
</script>

<script setup lang="ts">
// 使用 TS 類(lèi)型定義 Props
const props = defineProps<{
  id: string
}>();

// 使用 TS 定義 Emits，具備更好的類(lèi)型檢查
const emit = defineEmits<{
  (e: 'childEvent', args: string): void;
}>();

const sendMessage = () => {
  emit('childEvent', '這是來(lái)自子組件的參數(shù)');
};
</script>

<script setup lang="ts">
const childFunc = () => {
  console.log('子組件方法被調(diào)用');
};

// 必須手動(dòng)暴露，父組件才能訪問(wèn)
defineExpose({
  childFunc
});
</script>

<template>
  <Child ref="childRef" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Child from './Child.vue';

// 這里的類(lèi)型定義有助于獲得代碼提示
const childRef = ref<InstanceType<typeof Child> | null>(null);

onMounted(() => {
  childRef.value?.childFunc();
});
</script>

import Vue from 'vue';
export const EventBus = new Vue();

// 組件 A 發(fā)送
EventBus.$emit('event', data);
// 組件 B 接收
EventBus.$on('event', (data) => { ... });

<template>
  <div class="ancestor">
    <h1>祖先組件</h1>
    <p>當(dāng)前主題：{{ theme }}</p>
    <Middle />
  </div>
</template>

<script setup lang="ts">
import { ref, provide } from 'vue';
import Middle from './Middle.vue';

// 1. 定義響應(yīng)式數(shù)據(jù)
const theme = ref<'light' | 'dark'>('light');

// 2. 定義修改數(shù)據(jù)的方法（推薦在提供者內(nèi)部定義，保證數(shù)據(jù)流向清晰）
const toggleTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light';
};

// 3. 注入 key 和對(duì)應(yīng)的值/方法
provide('theme', theme);
provide('toggleTheme', toggleTheme);
</script>

<template>
  <div class="descendant">
    <h3>深層子組件</h3>
    <p>接收到的主題：{{ theme }}</p>
    <button @click="toggleTheme">切換主題</button>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';

// 使用 inject 獲取，第二個(gè)參數(shù)為默認(rèn)值（可選）
const theme = inject('theme');
const toggleTheme = inject<() => void>('toggleTheme');
</script>

import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: '張三',
    age: 18
  }),
  actions: {
    updateName(newName: string) {
      this.name = newName;
    }
  }
});