vue 页面向组件传递数据

在 Vue 中，向组件传递数据可以通过 Props 属性来实现。具体步骤如下：

1. 在父组件中定义要传递的数据，例如：

<template>
  <div>
    <my-component :message="hello"></my-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    MyComponent
  },
  data () {
    return {
      hello: 'Hello World'
    }
  }
}
</script>

2. 在子组件中声明 Props 属性，例如：

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

<script>
export default {
  name: 'MyComponent',
  props: {
    message: String
  }
}
</script>

在子组件中，我们声明了一个名为 `message` 的 Props 属性，并指定它的类型为 `String`。然后在模板中使用 `message` 属性来显示父组件传递的数据。

最后，在父组件中使用子组件时，通过 `v-bind` 指令将数据绑定到子组件的 Props 属性上，例如：

<my-component :message="hello"></my-component>

这样子组件就可以访问 `message` 属性并显示父组件传递的数据了。