vue 向子组件传递数据

在 Vue 中，向子组件传递数据可以通过 props 属性实现。下面是一个简单的示例：

1. 在父组件中定义一个属性：

<template>
  <div>
    <ChildComponent :message="parentMessage"></ChildComponent>
  </div>
</template>

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

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

2. 在子组件中接收该属性：

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

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

在这个示例中，父组件使用了 v-bind 指令来将 parentMessage 属性传递给了子组件的 message 属性。子组件通过 props 属性来声明要接收的属性，这里声明了一个名为 message 的字符串类型属性。最终，子组件将会显示 "Hello from parent component"。