// 子組件 ChildComponent.vue
<template>
  <div>
    <h3>子組件接收到的消息：{{ message }}</h3>
    <p>用戶(hù)年齡：{{ userInfo.age }}</p>
  </div>
</template>

<script>
export default {
  // 定義props，可以指定類(lèi)型和默認(rèn)值
  props: {
    message: {
      type: String,
      required: true  // 必須傳遞這個(gè)prop
    },
    userInfo: {
      type: Object,
      default: () => ({})  // 默認(rèn)空對(duì)象
    }
  }
}
</script>

// 父組件 ParentComponent.vue
<template>
  <div>
    <child-component 
      :message="parentMessage" 
      :user-info="userData"
    />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: '來(lái)自父組件的問(wèn)候',
      userData: {
        name: '小明',
        age: 25
      }
    }
  }
}
</script>

// 子組件 SubmitButton.vue
<template>
  <button @click="handleClick">
    提交表單
  </button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 觸發(fā)自定義事件，并傳遞數(shù)據(jù)
      this.$emit('form-submit', {
        timestamp: new Date(),
        formData: this.formData
      })
    }
  }
}
</script>

// 父組件 FormContainer.vue
<template>
  <div>
    <submit-button @form-submit="handleFormSubmit" />
  </div>
</template>

<script>
import SubmitButton from './SubmitButton.vue'

export default {
  components: { SubmitButton },
  methods: {
    handleFormSubmit(payload) {
      console.log('接收到子組件的數(shù)據(jù)：', payload)
      // 這里可以處理表單提交邏輯
      this.submitToServer(payload.formData)
    }
  }
}
</script>

// 子組件 CustomInput.vue
<template>
  <input 
    ref="inputRef" 
    v-model="inputValue" 
    type="text"
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    // 子組件的自定義方法
    focus() {
      this.$refs.inputRef.focus()
    },
    clear() {
      this.inputValue = ''
    },
    getValue() {
      return this.inputValue
    }
  }
}
</script>

// 父組件 ParentComponent.vue
<template>
  <div>
    <custom-input ref="myInput" />
    <button @click="handleFocus">聚焦輸入框</button>
    <button @click="handleClear">清空輸入框</button>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: { CustomInput },
  methods: {
    handleFocus() {
      // 通過(guò)ref直接調(diào)用子組件的方法
      this.$refs.myInput.focus()
    },
    handleClear() {
      // 調(diào)用子組件的清空方法
      this.$refs.myInput.clear()
      
      // 也可以直接訪問(wèn)子組件的數(shù)據(jù)（不推薦）
      // this.$refs.myInput.inputValue = ''
    }
  }
}
</script>

// event-bus.js - 創(chuàng)建事件總線
import Vue from 'vue'
export const EventBus = new Vue()

// 組件A - 事件發(fā)送者
<template>
  <button @click="sendMessage">發(fā)送全局消息</button>
</template>

<script>
import { EventBus } from './event-bus'

export default {
  methods: {
    sendMessage() {
      // 觸發(fā)全局事件
      EventBus.$emit('global-message', {
        text: 'Hello from Component A!',
        from: 'ComponentA'
      })
    }
  }
}
</script>

// 組件B - 事件監(jiān)聽(tīng)者
<template>
  <div>
    <p>最新消息：{{ latestMessage }}</p>
  </div>
</template>

<script>
import { EventBus } from './event-bus'

export default {
  data() {
    return {
      latestMessage: ''
    }
  },
  mounted() {
    // 監(jiān)聽(tīng)全局事件
    EventBus.$on('global-message', (payload) => {
      this.latestMessage = `${payload.from} 說(shuō)：${payload.text}`
    })
  },
  beforeDestroy() {
    // 組件銷(xiāo)毀前移除事件監(jiān)聽(tīng)，防止內(nèi)存泄漏
    EventBus.$off('global-message')
  }
}
</script>

// 祖先組件 Ancestor.vue
<template>
  <div>
    <middle-component />
  </div>
</template>

<script>
export default {
  // 提供數(shù)據(jù)和方法
  provide() {
    return {
      // 提供響應(yīng)式數(shù)據(jù)
      appTheme: this.theme,
      // 提供方法
      changeTheme: this.changeTheme,
      // 提供常量
      appName: '我的Vue應(yīng)用'
    }
  },
  data() {
    return {
      theme: 'dark'
    }
  },
  methods: {
    changeTheme(newTheme) {
      this.theme = newTheme
    }
  }
}
</script>

// 深層子組件 DeepChild.vue
<template>
  <div :class="`theme-${appTheme}`">
    <h3>應(yīng)用名稱(chēng)：{{ appName }}</h3>
    <button @click="changeTheme('light')">切換亮色主題</button>
    <button @click="changeTheme('dark')">切換暗色主題</button>
  </div>
</template>

<script>
export default {
  // 注入祖先組件提供的數(shù)據(jù)
  inject: ['appTheme', 'changeTheme', 'appName'],
  
  // 也可以指定默認(rèn)值和來(lái)源
  // inject: {
  //   theme: {
  //     from: 'appTheme',
  //     default: 'light'
  //   }
  // }
}
</script>

// 中間組件 MiddleComponent.vue
<template>
  <div>
    <!-- 傳遞所有屬性和事件到子組件 -->
    <child-component v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: { ChildComponent },
  inheritAttrs: false, // 不讓屬性綁定到根元素
  mounted() {
    console.log('$attrs:', this.$attrs) // 所有非props屬性
    console.log('$listeners:', this.$listeners) // 所有事件監(jiān)聽(tīng)器
  }
}
</script>

// 最終子組件 ChildComponent.vue
<template>
  <input
    v-bind="$attrs"
    v-on="$listeners"
    class="custom-input"
  />
</template>

<script>
export default {
  mounted() {
    // 可以直接使用父組件傳遞的所有屬性和事件
    console.log('接收到的屬性：', this.$attrs)
  }
}
</script>

// 父組件使用
<template>
  <middle-component
    placeholder="請(qǐng)輸入內(nèi)容"
    maxlength="20"
    @focus="handleFocus"
    @blur="handleBlur"
  />
</template>

// store/index.js
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0,
      user: null,
      loading: false
    }
  },
  mutations: {
    // 同步修改狀態(tài)
    increment(state) {
      state.count++
    },
    setUser(state, user) {
      state.user = user
    },
    setLoading(state, loading) {
      state.loading = loading
    }
  },
  actions: {
    // 異步操作
    async login({ commit }, credentials) {
      commit('setLoading', true)
      try {
        const user = await api.login(credentials)
        commit('setUser', user)
        return user
      } finally {
        commit('setLoading', false)
      }
    }
  },
  getters: {
    // 計(jì)算屬性
    isLoggedIn: state => !!state.user,
    doubleCount: state => state.count * 2
  }
})

// 組件中使用
<template>
  <div>
    <p>計(jì)數(shù)器：{{ count }}</p>
    <p>雙倍計(jì)數(shù)：{{ doubleCount }}</p>
    <p v-if="isLoggedIn">歡迎，{{ user.name }}！</p>
    <button @click="increment">增加</button>
    <button @click="login" :disabled="loading">
      {{ loading ? '登錄中...' : '登錄' }}
    </button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    // 映射state和getters到計(jì)算屬性
    ...mapState(['count', 'user', 'loading']),
    ...mapGetters(['doubleCount', 'isLoggedIn'])
  },
  methods: {
    // 映射mutations和actions到方法
    ...mapMutations(['increment']),
    ...mapActions(['login'])
  }
}
</script>

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

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: '我的計(jì)數(shù)器'
  }),
  
  getters: {
    doubleCount: (state) => state.count * 2,
    // 使用this訪問(wèn)其他getter
    doubleCountPlusOne() {
      return this.doubleCount + 1
    }
  },
  
  actions: {
    increment() {
      this.count++
    },
    async incrementAsync() {
      // 異步action
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.increment()
    },
    reset() {
      this.count = 0
    }
  }
})

// 組件中使用
<template>
  <div>
    <h3>{{ name }}</h3>
    <p>當(dāng)前計(jì)數(shù)：{{ count }}</p>
    <p>雙倍計(jì)數(shù)：{{ doubleCount }}</p>
    <button @click="increment">增加</button>
    <button @click="incrementAsync">異步增加</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counterStore = useCounterStore()
    
    // 可以直接解構(gòu)，但會(huì)失去響應(yīng)式
    // 使用storeToRefs保持響應(yīng)式
    const { name, count, doubleCount } = counterStore
    
    return {
      // state和getters
      name,
      count,
      doubleCount,
      // actions
      increment: counterStore.increment,
      incrementAsync: counterStore.incrementAsync,
      reset: counterStore.reset
    }
  }
}
</script>

// 在多個(gè)store之間交互
import { useUserStore } from '@/stores/user'

export const useCartStore = defineStore('cart', {
  actions: {
    async checkout() {
      const userStore = useUserStore()
      
      if (!userStore.isLoggedIn) {
        await userStore.login()
      }
      
      // 結(jié)賬邏輯...
    }
  }
})