vue2组件传值

// 父组件向子组件传值示例

// 子组件：ChildComponent.vue
<template>
  <div>
    <!-- 显示从父组件传递过来的 message -->
    <p>{{ messageFromParent }}</p>
  </div>
</template>

<script>
export default {
  props: ['messageFromParent'], // 接收父组件传递的值
};
</script>

// 父组件：ParentComponent.vue
<template>
  <div>
    <!-- 将 message 作为属性传递给子组件 -->
    <child-component :message-from-parent="message"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello from Parent!', // 要传递给子组件的数据
    };
  },
};
</script>

解释说明：

1. 父组件 (ParentComponent.vue) 定义了一个 data 属性 message，并通过 v-bind 指令 (:) 将其作为属性传递给子组件。
2. 子组件 (ChildComponent.vue) 使用 props 来接收父组件传递的值，并在模板中显示该值。
3. 在子组件中，messageFromParent 是一个 prop，它会自动接收父组件传递过来的 message。

这种方式是 Vue 2 中常见的父子组件间通信的方式。