vue2中父子组件传值案例总结

在 Vue 2 中，父子组件之间的传值是通过 props 和事件来实现的。下面是详细的解释和总结：

1. 父组件向子组件传值

父组件可以通过 props 向子组件传递数据。以下是一个简单的示例：

父组件 (Parent.vue)

<template><div><h1>父组件</h1><child-component :message="parentMessage"></child-component></div>
</template><script>
import ChildComponent from './Child.vue';export default {components: {ChildComponent},data() {return {parentMessage: 'Hello from Parent!'}}
}
</script>

子组件 (Child.vue)

<template><div><h2>子组件</h2><p>{{ message }}</p></div>
</template><script>
export default {props: {message: {type: String,required: false, // 不是必需的default: '默认消息' // 设置默认值}}
}
</script>

2. 子组件向父组件传值

子组件可以通过 $emit 方法向父组件发送事件，父组件可以监听这个事件并处理数据。以下是示例：

子组件 (Child.vue)

<template><div><h2>子组件</h2><button @click="sendMessage">发送消息给父组件</button></div>
</template><script>
export default {methods: {sendMessage() {this.$emit('messageFromChild', 'Hello from Child!');}}
}
</script>

父组件 (Parent.vue)

<template><div><h1>父组件</h1><child-component @messageFromChild="receiveMessage"></child-component><p>收到的消息: {{ receivedMessage }}</p></div>
</template><script>
import ChildComponent from './Child.vue';export default {components: {ChildComponent},data() {return {receivedMessage: ''}},methods: {receiveMessage(message) {this.receivedMessage = message;}}
}
</script>

总结

• 父组件向子组件传值：使用 props。父组件定义数据并将其作为属性传递给子组件。
• 子组件向父组件传值：使用自定义事件。子组件通过 $emit 发送事件，父组件通过 v-on 或 @ 监听这些事件并处理传递的数据。
• 单向数据流：在 Vue 中，数据流是单向的，父组件的数据流向子组件，而子组件通过事件向父组件发送信息。

这种父子组件间的通信方式使得组件之间的关系清晰，便于维护和扩展。