vue props 赋值

在 Vue 中，可以通过 props 属性来将父组件的数据传递到子组件中。子组件需要在 props 中声明这些数据，并且可以通过使用 v-bind 指令将其赋值给子组件的属性。

例如，假设父组件有一个属性 message，它的值为 "Hello World!"，我们想要将这个值传递给子组件：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

在子组件中，我们需要在 props 中声明 message 属性，并且可以通过 this.message 来访问它：

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

这样，当父组件的 message 属性发生变化时，子组件的 message 属性也会自动更新。