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