VUE中父组件向子组件进行传值

在 Vue 中，父组件向子组件传值主要通过在子组件的标签上绑定属性（props）的方式来实现。以下是一个具体的示例。

父组件（ParentComponent.vue）:

<template><div><!-- 父组件中使用子组件，并传递一个名为 message 的值 --><ChildComponent :message="parentMessage" /></div>
</template><script>
// 导入子组件
import ChildComponent from './ChildComponent.vue';export default {name: 'ParentComponent',components: {ChildComponent, // 注册子组件},data() {return {parentMessage: 'Hello from parent!', // 定义父组件的数据};},
};
</script>

子组件（ChildComponent.vue）:

<template><div><!-- 子组件中接收父组件传递的 message 值 --><p>{{ receivedMessage }}</p></div>
</template><script>
export default {name: 'ChildComponent',props: {message: { // 在子组件中定义名为 message 的 propstype: String, // 指定数据类型为字符串required: true, // 父组件必须传递 message 属性，否则会发出警告},},data() {return {receivedMessage: '', // 定义子组件中接收父组件传递的值的变量};},// 监听父组件传递的 message 值的变化watch: {message(newValue) {this.receivedMessage = newValue; // 更新子组件中接收的值},},
};
</script>

在这个示例中，父组件（ParentComponent.vue）向子组件（ChildComponent.vue）传递了一个名为 message 的属性，子组件通过在 props 中定义 message 属性来接收传递的值。然后，在子组件中，通过监听 message 的变化，将接收到的值赋给 receivedMessage 变量，并在模板中渲染出来。