vue3如何设置 props 多种类型的默认值

在Vue 3中，你可以使用v-bind指令或:语法将父组件的属性传递给子组件。如果你想为属性设置多种类型的默认值，可以使用类型注解和可选属性。

下面是一个示例，演示了如何在Vue 3中设置多种类型的默认值：

<template>  
  <div>  
    <ChildComponent :myProp="myPropValue" />  
  </div>  
</template>  
  
<script>  
import { defineComponent, ref } from 'vue';  
  
export default defineComponent({  
  setup() {  
    const myPropValue = ref(null); // 定义一个响应式变量作为默认值  
  
    const MyComponent = defineComponent({  
      props: {  
        myProp: {  
          type: [String, Number, Array, Object], // 设置多种类型的默认值  
          default: () => myPropValue.value, // 使用响应式变量作为默认值  
        },  
      },  
      setup() {  
        // 在这里可以使用 this.myProp 来访问传递进来的属性值  
        // ...  
      },  
    });  
  
    return { MyComponent };  
  },  
});  
</script>

在上面的示例中，我们定义了一个名为myProp的属性，其类型可以是字符串、数字、数组或对象。通过使用一个响应式变量myPropValue作为默认值，我们可以在父组件中动态地更改默认值，并且子组件会自动更新。