vue3使用props

在Vue 3中，使用props非常简单。props是父组件向子组件传递数据的一种方式。下面是一个简单的示例：

1. 在父组件中定义props：

// ParentComponent.vue

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

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

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

2. 在子组件中接收props：

// ChildComponent.vue

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

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

在上面的示例中，父组件通过将数据`parentMessage`传递给子组件`ChildComponent`的props属性`:message`来向子组件传递数据。子组件使用`message`属性接收该数据，并在模板中进行渲染。

注意：在Vue 3中，props的声明方式稍有不同，使用了`props`选项，并且可以指定类型和其他验证选项。