在vue2中父组件传值给子组件

在 Vue2 中，父组件向子组件传递数据可以通过 props 属性实现。

首先，在父组件中定义要传递给子组件的数据，如下所示：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent component!'
    }
  }
}
</script>

在这个例子中，我们向子组件传递了一个名为 message 的 props，它的值为 parentMessage，也就是父组件中定义的数据。

然后，在子组件中声明接收 props，如下所示：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

在这个例子中，我们声明了一个名为 message 的 prop，它的类型为 String。子组件中的 {{ message }} 就可以显示父组件传递过来的值了。

需要注意的是，props 是单向数据流，即只能从父组件流向子组件，如果子组件需要修改传递过来的值，应该通过 $emit 触发父组件的事件来实现。