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（父组件）
<code class="html"><template>
<child-component :message="message" />
</template>
<script>
export default {
data() {
return {
message: 'Hello from parent!'
}
}
}
</script></code>props（子组件）
<code class="html"><template>
<p>{{ message }}</p>
</template>
<script>
export default {
props: ['message']
}
</script></code>$emit（子组件）
<code class="html"><template>
<button @click="emitData">Send Data</button>
</template>
<script>
export default {
methods: {
emitData() {
this.$emit('sendData', { name: 'John' })
}
}
}
</script></code>$emit（父组件）
<code class="html"><template>
<child-component @sendData="receiveData"></child-component>
</template>
<script>
export default {
methods: {
receiveData(data) {
console.log(data)
}
}
}
</script></code> 
