vue3中props用法

在Vue 3中，使用props来接收父组件传递的数据。props可以是任何类型的值，包括基本类型、对象或数组。

在子组件中，你可以通过props选项来声明要接收的属性。例如：

// 子组件
export default {
  props: {
    message: String, // 基本类型
    user: Object, // 对象类型
    items: Array // 数组类型
  },
  // ...
}

然后，在父组件中通过绑定属性的方式传递数据给子组件。例如：

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="msg" :user="userInfo" :items="list"></child-component>
 </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello",
      userInfo: { name: "Alice", age: 25 },
      list: ["item1", "item2", "item3"]
    }
  },
  // ...
}
</script>

子组件中的props选项声明了要接收的属性，然后通过绑定属性的方式传递数据给子组件。在子组件中，你可以直接使用props中声明的属性。

注意，在Vue 3中，props是只读的，即不能在子组件中直接修改props中的数据。如果需要在子组件中修改传递的数据，可以通过emits选项结合自定义事件来实现。