// 父組件 Parent.vue
<template>
  <!-- 傳遞普通值、對象、方法 -->
  <Child 
    :name="userName" 
    :user="userInfo" 
    :handleClick="parentClick"
  />
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const userName = ref('張三')
const userInfo = ref({ age: 22, role: 'admin' })
const parentClick = () => {
  console.log('父組件方法被調(diào)用')
}
</script>

// 子組件 Child.vue
<template>
  <div>{{ name }} - {{ user.age }}</div>
  <button @click="handleClick">調(diào)用父組件方法</button>
</template>

<script setup>
// 接收父組件傳遞的數(shù)據(jù)，可指定類型、默認值、校驗
const props = defineProps({
  name: {
    type: String,
    required: true, // 必傳
    default: '未知用戶'
  },
  user: {
    type: Object,
    default: () => ({}) // 對象默認值需用函數(shù)
  },
  handleClick: {
    type: Function
  }
})
</script>

// 父組件 Parent.vue
<template>
  <Child ref="childRef" />
  <button @click="operateChild">操作子組件</button>
  <div ref="domRef">普通DOM元素</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const childRef = ref(null) // 綁定子組件ref
const domRef = ref(null) // 綁定普通DOM元素

onMounted(() => {
  // 訪問普通DOM元素
  console.log(domRef.value.textContent) // 輸出：普通DOM元素
})

const operateChild = () => {
  // 訪問子組件數(shù)據(jù)
  console.log(childRef.value.childName)
  // 調(diào)用子組件方法
  childRef.value.childMethod()
}
</script>

// 子組件 Child.vue
<script setup>
import { ref } from 'vue'

const childName = ref('子組件')
const childMethod = () => {
  console.log('子組件方法被調(diào)用')
}

// Vue3 setup 需主動暴露，父組件才能訪問
defineExpose({
  childName,
  childMethod
})
</script>

// 父組件 Parent.vue
<template>
  <Child1 />
  <Child2 />
  <button @click="operateAllChildren">操作所有子組件</button>
</template>

<script>
// Vue2 用法（Vue3 setup 中需通過 getCurrentInstance 獲?。?
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'

export default {
  components: { Child1, Child2 },
  methods: {
    operateAllChildren() {
      // 獲取所有直接子組件，遍歷操作
      this.$children.forEach(child => {
        console.log(child.childName) // 訪問子組件數(shù)據(jù)
        child.childMethod() // 調(diào)用子組件方法
      })
    }
  }
}

// Vue3 setup 用法
import { getCurrentInstance } from 'vue'
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'

const instance = getCurrentInstance()
const operateAllChildren = () => {
  instance.refs.$children.forEach(child => {
    console.log(child.childName)
    child.childMethod()
  })
}
</script>

// 父組件 Parent.vue
<template>
  <!-- .sync 修飾符實現(xiàn)雙向綁定 -->
  <Child :count.sync="parentCount" />
  <p>父組件count：{{ parentCount }}</p>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const parentCount = ref(0)
</script>

// 子組件 Child.vue
<template>
  <button @click="changeCount">修改count（.sync）</button>
</template>

<script setup>
const props = defineProps(['count'])
const emit = defineEmits(['update:count'])

const changeCount = () => {
  // 觸發(fā) update:屬性名 事件，實現(xiàn)雙向同步
  emit('update:count', props.count + 1)
}
</script>

// 子組件 Child.vue（表單組件）
<template>
  <input 
    type="text" 
    :value="modelValue" 
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
// v-model 默認綁定 modelValue，觸發(fā) update:modelValue 事件
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

// 父組件 Parent.vue
<template>
  <!-- 雙向綁定，無需額外監(jiān)聽事件 -->
  <Child v-model="inputValue" />
  <p>父組件接收值：{{ inputValue }}</p>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const inputValue = ref('')
</script>

// 子組件 Child.vue（插槽組件）
<template>
  <div class="card">
    <!-- 匿名插槽：接收父組件傳遞的任意內(nèi)容，無名稱 -->
    <slot>默認內(nèi)容（父組件未傳內(nèi)容時顯示）</slot>
    
    <!-- 具名插槽：接收指定名稱的內(nèi)容，實現(xiàn)多區(qū)域分發(fā) -->
    <slot name="header">默認頭部</slot>
    <slot name="footer">默認底部</slot>
  </div>
</template>

// 父組件 Parent.vue
<template>
  <Child>
    <!-- 匿名插槽內(nèi)容 -->
    <p>卡片主體內(nèi)容</p>
    
    <!-- 具名插槽內(nèi)容，通過 # 簡寫指定插槽名稱 -->
    <template #header>
      <h3>卡片標題</h3>
    </template>
    
    <template #footer>
      <button>點擊按鈕</button>
    </template>
  </Child>
</template>

// 子組件 Child.vue
<template>
  <button @click="sendData">向父組件傳值</button>
</template>

<script setup>
// 定義可觸發(fā)的自定義事件
const emit = defineEmits(['sendMsg', 'updateName'])

const sendData = () => {
  // 觸發(fā)事件，可傳遞1個或多個參數(shù)
  emit('sendMsg', '子組件傳遞的消息', 123)
  emit('updateName', '李四') // 通知父組件修改名稱
}
</script>

// 父組件 Parent.vue
<template>
  <Child 
    @sendMsg="getMsg" 
    @updateName="userName = $event"
  />
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const userName = ref('張三')
const getMsg = (msg, num) => {
  console.log('接收子組件消息：', msg, num) // 輸出：子組件傳遞的消息 123
}
</script>

// 父組件 Parent.vue
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const parentName = ref('父組件')
const parentMethod = () => {
  console.log('父組件方法被調(diào)用')
}

// Vue3 setup 需暴露給子組件
defineExpose({
  parentName,
  parentMethod
})
</script>

// 子組件 Child.vue
<template>
  <button @click="accessParent">訪問父組件</button>
</template>

<script setup>
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const accessParent = () => {
  // 訪問父組件數(shù)據(jù)
  console.log(instance.parent.parentName)
  // 調(diào)用父組件方法
  instance.parent.parentMethod()
}
</script>

// 子組件 Child.vue（作用域插槽）
<template>
  <div>
    <!-- 子組件向父組件傳遞數(shù)據(jù)（row、index） -->
    <slot :row="user" :index="1">
      默認內(nèi)容（父組件未自定義插槽時顯示）
    </slot>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const user = ref({ name: '張三', age: 22 })
</script>

// 父組件 Parent.vue
<template>
  <Child>
    <!-- 父組件接收子組件傳遞的數(shù)據(jù)，自定義渲染內(nèi)容 -->
    <template #default="slotProps">
      <p>姓名：{{ slotProps.row.name }}</p>
      <p>索引：{{ slotProps.index }}</p>
    </template>
  </Child>
</template>

// 1. 創(chuàng)建事件總線（utils/eventBus.js）
import { ref, onUnmounted } from 'vue'

export const useEventBus = () => {
  const events = ref({}) // 存儲事件訂閱

  // 訂閱事件
  const on = (eventName, callback) => {
    if (!events.value[eventName]) {
      events.value[eventName] = []
    }
    events.value[eventName].push(callback)
  }

  // 發(fā)布事件
  const emit = (eventName, ...args) => {
    if (events.value[eventName]) {
      events.value[eventName].forEach(callback => callback(...args))
    }
  }

  // 取消訂閱（避免內(nèi)存泄漏）
  const off = (eventName, callback) => {
    if (events.value[eventName]) {
      events.value[eventName] = events.value[eventName].filter(cb => cb !== callback)
    }
  }

  // 組件卸載時自動取消訂閱
  const useAutoOff = (eventName, callback) => {
    on(eventName, callback)
    onUnmounted(() => off(eventName, callback))
  }

  return { on, emit, off, useAutoOff }
}

// 2. 兄弟組件 A（發(fā)布事件）
<script setup>
import { useEventBus } from '@/utils/eventBus'
const { emit } = useEventBus()

const sendToBrother = () => {
  emit('brotherMsg', '來自兄弟A的消息')
}
</script>

// 3. 兄弟組件 B（訂閱事件）
<script setup>
import { useEventBus } from '@/utils/eventBus'
const { useAutoOff } = useEventBus()

// 自動取消訂閱，避免內(nèi)存泄漏
useAutoOff('brotherMsg', (msg) => {
  console.log('接收兄弟A消息：', msg)
})
</script>

// Vue3 用法（useAttrs）
// 爺爺組件
<template>
  <Parent :name="userName" :age="22" @click="parentClick" @updateName="updateName" />
</template>

<script setup>
import { ref } from 'vue'
import Parent from './Parent.vue'

const userName = ref('張三')
const parentClick = () => console.log('爺爺組件點擊事件')
const updateName = (newName) => userName.value = newName
</script>

// 父組件（無需接收props，直接傳遞給子組件）
<template>
  <Child v-bind="attrs" v-on="listeners" />
</template>

<script setup>
import { useAttrs, useListeners } from 'vue'
const attrs = useAttrs() // 接收所有未被prop識別的屬性
const listeners = useListeners() // 接收所有父組件事件
</script>

// 子組件（直接接收爺爺組件傳遞的內(nèi)容）
<script setup>
const props = defineProps(['name', 'age'])
const emit = defineEmits(['click', 'updateName'])

// 觸發(fā)爺爺組件的事件
const triggerGrandpaEvent = () => {
  emit('click')
  emit('updateName', '李四')
}
</script>

// 祖先組件（頂層組件，如 App.vue）
<script setup>
import { provide, ref } from 'vue'

// 提供數(shù)據(jù)（可提供響應式數(shù)據(jù)）
const theme = ref('light')
provide('theme', theme)

// 提供方法（修改共享數(shù)據(jù)）
const changeTheme = () => {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}
provide('changeTheme', changeTheme)
</script>

// 子組件（任意層級，無需通過父組件傳遞）
<script setup>
import { inject } from 'vue'

// 接收共享數(shù)據(jù)和方法
const theme = inject('theme')
const changeTheme = inject('changeTheme')
</script>

<template>
  <div :class="theme">當前主題：{{ theme }}</div>
  <button @click="changeTheme">切換主題</button>
</template>

// 根組件 App.vue
<script setup>
import { ref } from 'vue'

const globalMsg = ref('全局共享消息')
const globalMethod = () => {
  console.log('根組件全局方法被調(diào)用')
}

// 暴露給所有子組件
defineExpose({
  globalMsg,
  globalMethod
})
</script>

// 任意子組件（無論層級）
<script setup>
import { getCurrentInstance } from 'vue'

const instance = getCurrentInstance()
const accessRoot = () => {
  // 訪問根組件數(shù)據(jù)
  console.log(instance.root.globalMsg)
  // 調(diào)用根組件方法
  instance.root.globalMethod()
}
</script>

// 1. 安裝 Pinia 并創(chuàng)建倉庫（store/user.js）
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null, // 全局共享的用戶信息
    token: ''
  }),
  actions: {
    // 修改狀態(tài)的方法
    setUserInfo(info) {
      this.userInfo = info
      this.token = info.token
    },
    logout() {
      this.userInfo = null
      this.token = ''
    }
  }
})

// 2. 任意組件使用（讀取/修改狀態(tài)）
<script setup>
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

// 讀取狀態(tài)
console.log(userStore.userInfo)

// 修改狀態(tài)（通過 actions，避免直接修改 state）
userStore.setUserInfo({ name: '張三', token: 'abc123' })

// 直接修改狀態(tài)（簡單場景，不推薦復雜項目）
userStore.token = 'def456'
</script>

// Vue2 Vuex 簡單示例
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({
  state: { userInfo: null },
  mutations: {
    setUserInfo(state, info) {
      state.userInfo = info
    }
  },
  actions: {
    setUserInfo({ commit }, info) {
      commit('setUserInfo', info)
    }
  }
})

// 組件中使用
this.$store.dispatch('setUserInfo', { name: '張三' })
console.log(this.$store.state.userInfo)

// 1. 跳轉時傳遞參數(shù)（列表頁）
<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const goToDetail = (id) => {
  // 方式1：query 參數(shù)（暴露在URL上，可刷新，適合簡單數(shù)據(jù)）
  router.push({
    path: '/detail',
    query: { id, name: '張三' }
  })

  // 方式2：params 參數(shù)（不暴露在URL上，刷新丟失，適合敏感數(shù)據(jù)）
  router.push({
    name: 'Detail', // 需配置路由name
    params: { id, name: '張三' }
  })
}
</script>

// 2. 詳情頁接收參數(shù)
<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
// 接收 query 參數(shù)
console.log(route.query.id)
// 接收 params 參數(shù)
console.log(route.params.id)
</script>