父组件向子组件传递数据

使用 Props 传递数据

父组件向子组件传递数据：父组件通过 props 将数据传递给子组件。在父组件的模板中，通过绑定属性的方式传递数据给子组件。

父组件示例 (ParentComponent.vue)：

<template>
    <div>
        <h1>父组件</h1>
        <!-- 使用子组件，并传递数据 -->
        <ChildComponent :message="parentMessage" />
    </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'; // 假设子组件的路径

export default {
    components: {
        ChildComponent
    },
    data() {
        return {
            parentMessage: '这是来自父组件的消息'
        };
    }
};
</script>

子组件示例 (ChildComponent.vue)：

 

<template>
    <div>
        <h2>子组件</h2>
        <p>{{ message }}</p >
    </div>
</template>

<script>
export default {
    props: {
        message: String // 定义一个名为 message 的 prop，类型为 String
    }
};
</script>

在上面的例子中，ParentComponent 将 parentMessage 通过 ChildComponent 的 message prop 传递给了子组件。