<!-- 父組件 Parent.vue -->
<template>
  <Child :title="pageTitle" :count="total" />
</template>

<script>
export default {
  data() {
    return {
      pageTitle: '首頁(yè)', // 要傳遞的數(shù)據(jù)
      total: 10
    }
  }
}
</script>

<!-- 子組件 Child.vue -->
<script>
export default {
  props: {
    title: String,  // 類型聲明
    count: {
      type: Number,
      default: 0    // 默認(rèn)值
    }
  },
  mounted() {
    console.log(this.title) // 使用父組件傳遞的值
  }
}
</script>

<!-- 子組件 Child.vue -->
<template>
  <button @click="notifyParent">點(diǎn)擊我</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      // 觸發(fā)自定義事件，并傳遞數(shù)據(jù)
      this.$emit('child-clicked', { time: Date.now() })
    }
  }
}
</script>

<!-- 父組件 Parent.vue -->
<template>
  <Child @child-clicked="handleChildEvent" />
</template>

<script>
export default {
  methods: {
    handleChildEvent(payload) {
      console.log('收到子組件消息:', payload.time)
    }
  }
}
</script>

<!-- 父組件 -->
<template>
  <CustomInput v-model="searchText" />
</template>

<!-- 子組件 CustomInput.vue -->
<template>
  <input 
    :value="value" 
    @input="$emit('input', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['value'] // 必須用value作為prop名
}
</script>

<CustomInput v-model:title="title" v-model:content="content" />

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

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.childComp.doSomething() // 直接調(diào)用子組件方法
    }
  }
}
</script>

<!-- 子組件 -->
<script>
export default {
  methods: {
    doSomething() {
      console.log('方法被父組件調(diào)用了')
    }
  }
}
</script>

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

// 組件A（發(fā)送事件）
EventBus.$emit('user-logged', { username: 'Alice' })

// 組件B（監(jiān)聽事件）
EventBus.$on('user-logged', payload => {
  console.log(payload.username)
})

EventBus.$off('user-logged')

// store.js (Vuex示例)
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

// 組件中使用
this.$store.commit('increment')
console.log(this.$store.state.count)

<!-- 祖先組件 -->
<script>
export default {
  provide() {
    return {
      appTheme: 'dark' // 提供數(shù)據(jù)
    }
  }
}
</script>

<!-- 后代組件（任意層級(jí)） -->
<script>
export default {
  inject: ['appTheme'], // 注入數(shù)據(jù)
  mounted() {
    console.log(this.appTheme) // 直接訪問
  }
}
</script>