vue父子组件实现
Vue 父子组件通信实现
Vue 父子组件通信主要通过 props 和 events 实现，父组件向子组件传递数据使用 props，子组件向父组件传递数据使用自定义事件。
父组件向子组件传递数据
父组件通过 props 向子组件传递数据，子组件通过定义 props 接收数据。
父组件模板：
<template>
<child-component :message="parentMessage"></child-component>
</template>父组件脚本：
export default {
data() {
return {
parentMessage: 'Hello from parent'
}
}
}子组件接收 props：
export default {
props: ['message'],
mounted() {
console.log(this.message) // 输出: Hello from parent
}
}子组件向父组件传递数据
子组件通过 $emit 触发自定义事件，父组件通过 v-on 监听事件。
子组件触发事件：
export default {
methods: {
sendMessage() {
this.$emit('message-from-child', 'Hello from child')
}
}
}父组件监听事件：
<template>
<child-component @message-from-child="handleChildMessage"></child-component>
</template>父组件处理方法：
export default {
methods: {
handleChildMessage(msg) {
console.log(msg) // 输出: Hello from child
}
}
}使用 v-model 实现双向绑定
Vue 支持通过 v-model 在父子组件间实现双向数据绑定。
子组件实现：
export default {
model: {
prop: 'value',
event: 'input'
},
props: ['value'],
methods: {
updateValue(newValue) {
this.$emit('input', newValue)
}
}
}父组件使用：
<template>
<child-component v-model="parentValue"></child-component>
</template>使用 $refs 访问子组件
父组件可以通过 ref 属性访问子组件实例。
父组件模板：
<template>
<child-component ref="childRef"></child-component>
</template>父组件脚本：
export default {
mounted() {
this.$refs.childRef.childMethod()
}
}使用 provide/inject 跨层级传递数据
祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。
祖先组件：
export default {
provide() {
return {
ancestorData: 'Data from ancestor'
}
}
}后代组件：
export default {
inject: ['ancestorData'],
mounted() {
console.log(this.ancestorData) // 输出: Data from ancestor
}
}注意事项
props 应该尽量使用对象形式定义，可以添加类型检查和默认值：
props: {
message: {
type: String,
required: true,
default: 'Default message'
}
}自定义事件名应该使用 kebab-case 命名方式，避免使用大写字母。
避免直接修改 props 的值，应该通过事件通知父组件修改。
