Vue中的props的意思与用法

Vue中的props是用于父组件向子组件传递数据的一种方式。在父组件中定义props，在子组件中通过props接收数据。

在父组件中，可以通过v-bind指令将数据绑定到子组件的props中。例如：

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

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

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

在子组件中，可以通过props接收数据。例如：

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

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

上述代码中，父组件通过v-bind将parentMessage绑定到子组件的message props中，子组件中通过props接收message并显示。

在props中，可以定义数据类型、默认值、是否必须等属性。例如：

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

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

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

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

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

上述代码中，子组件的message props必须是字符串类型，如果没有传递props，则默认值为'Default message'，如果没有传递props且没有默认值，则会报错。