vue 2 父子組件傳值有如下幾種方式：props（自上而下）：父組件通過 props 傳值給子組件。$emit（自下而上）：子組件通過 $emit 事件向父組件發送數據。provide/inject（隱式父子通信）：父組件提供值，子組件注入該值。vuex（狀態管理）：父子組件共享 vuex 中的數據。ref（模板引用）：父組件通過 ref 獲取子組件實例。
Vue 2 父子組件傳值方式
Vue 2 中父子組件傳值有多種方式，包括：
1. props（自上而下）
父組件通過 props 屬性將數據傳遞給子組件。
子組件通過 props 接受父組件傳遞的數據。
2. $emit（自下而上）
子組件通過 $emit 事件向父組件發送數據。
父組件監聽子組件的事件并接收數據。
3. provide/inject（隱式父子通信）
父組件使用 provide 提供一個值。
子組件使用 inject 注入該值。
4. Vuex（狀態管理）
使用 Vuex 集中管理數據。
父子組件都可以訪問 Vuex 中的數據。
5. ref（模板引用）
父組件通過 ref 為子組件創建引用。
父組件可以使用 ref 訪問子組件的實例。
選擇合適的方式
選擇合適的傳值方式取決于具體的場景和數據類型：
props 和 $emit 最常用于簡單的數據傳遞。
provide/inject 適用于更復雜的場景，例如需要跨越多個組件層級的通信。
Vuex 適用于管理復雜且需要共享的大量數據。
ref 主要用于獲取子組件實例，而不是傳值。
示例
props（父組件）
<template><child-component :message="message"></child-component></template><script>
export default {
data() {
return {
message: 'Hello from parent!'
}
}
}
</script>
登錄后復制
props（子組件）
<template><p>{{ message }}</p>
</template><script>
export default {
props: ['message']
}
</script>
登錄后復制
$emit（子組件）
<template><button>Send Data</button>
</template><script>
export default {
methods: {
emitData() {
this.$emit('sendData', { name: 'John' })
}
}
}
</script>
登錄后復制
$emit（父組件）
<template><child-component></child-component></template><script>
export default {
methods: {
receiveData(data) {
console.log(data)
}
}
}
</script>
登錄后復制
