// 父組件
<template>
  <child-component 
    :message="parentMessage" 
    @child-clicked="handleChildClick"
  />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: '這是爸爸給你的數(shù)據(jù)'
    }
  },
  methods: {
    handleChildClick(data) {
      console.log('兒子告訴我：', data)
    }
  }
}
</script>

// 子組件
<template>
  <button @click="sendToParent">點擊告訴爸爸</button>
</template>

<script>
export default {
  props: ['message'], // 接收爸爸給的數(shù)據(jù)
  methods: {
    sendToParent() {
      this.$emit('child-clicked', '爸爸，我完成任務(wù)了！')
    }
  }
}
</script>

// 爺爺組件
<parent-component :title="標題" :content="內(nèi)容" @custom-event="handleEvent"/>

// 父組件（中間人）
<template>
  <child-component v-bind="$attrs" v-on="$listeners"/>
</template>

<script>
export default {
  // 注意：這里不聲明props，$attrs會自動包含所有未聲明的屬性
}
</script>

// 子組件（最終接收者）
export default {
  props: ['title', 'content'], // 直接接收爺爺傳來的屬性
  mounted() {
    this.$emit('custom-event') // 直接觸發(fā)爺爺?shù)氖录?
  }
}

// 中間組件
<child-component v-bind="$attrs"/>

// 父組件
<template>
  <child-component ref="myChild"/>
  <button @click="callChildMethod">調(diào)用子組件方法</button>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      // 通過ref直接調(diào)用子組件方法
      this.$refs.myChild.doSomething()
      
      // 或者通過$children（不常用，因為順序可能變化）
      this.$children[0].doSomething()
    }
  }
}
</script>

// 子組件
<script>
export default {
  methods: {
    doSomething() {
      // 直接找父組件
      this.$parent.parentMethod()
    }
  }
}
</script>

// 爺爺組件
<script>
export default {
  provide() {
    return {
      grandpaData: '這是爺爺給的數(shù)據(jù)',
      grandpaMethod: this.someMethod
    }
  },
  methods: {
    someMethod() {
      console.log('爺爺?shù)姆椒ū徽{(diào)用了')
    }
  }
}
</script>

// 孫子組件（跳過父組件）
<script>
export default {
  inject: ['grandpaData', 'grandpaMethod'],
  mounted() {
    console.log(this.grandpaData) // 直接使用爺爺?shù)臄?shù)據(jù)
    this.grandpaMethod() // 直接調(diào)用爺爺?shù)姆椒?
  }
}
</script>

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

// 組件A（發(fā)送事件）
<script>
import { EventBus } from './event-bus.js'

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-sent', '你好，另一個組件！')
    }
  }
}
</script>

// 組件B（接收事件）
<script>
import { EventBus } from './event-bus.js'

export default {
  mounted() {
    EventBus.$on('message-sent', (message) => {
      console.log('收到消息：', message)
    })
  },
  // 記得在組件銷毀時移除監(jiān)聽，避免內(nèi)存泄漏
  beforeDestroy() {
    EventBus.$off('message-sent')
  }
}
</script>

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    user: null
  },
  mutations: {
    // 同步修改狀態(tài)
    increment(state) {
      state.count++
    },
    setUser(state, user) {
      state.user = user
    }
  },
  actions: {
    // 異步操作
    async fetchUser({ commit }) {
      const user = await api.getUser()
      commit('setUser', user)
    }
  },
  getters: {
    // 計算屬性
    doubleCount: state => state.count * 2
  }
})

// 組件中使用
<script>
export default {
  computed: {
    count() {
      return this.$store.state.count
    },
    doubleCount() {
      return this.$store.getters.doubleCount
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    fetchUser() {
      this.$store.dispatch('fetchUser')
    }
  }
}
</script>

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

// 組件中使用
<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

// 直接訪問和修改狀態(tài)（Pinia會自動處理）
counter.count++
counter.increment()

// 使用計算屬性
const doubleValue = computed(() => counter.doubleCount)
</script>

// shared-state.js
import { reactive } from 'vue'

export const sharedState = reactive({
  message: '',
  updateMessage(newMessage) {
    this.message = newMessage
  }
})

// 組件A
<script setup>
import { sharedState } from './shared-state'

const updateSharedMessage = () => {
  sharedState.updateMessage('來自組件A的消息')
}
</script>

// 組件B
<script setup>
import { sharedState } from './shared-state'
import { watch } from 'vue'

// 監(jiān)聽共享狀態(tài)的變化
watch(() => sharedState.message, (newMessage) => {
  console.log('消息更新了：', newMessage)
})
</script>