如何将空数组绑定到 Vue.js3 中的道具？

Question

<script lang="ts" setup>   
  interface Props {
    bigArray: string[];
  }
        
  ***const props = withDefaults(defineProps<Props>(), {
    bigArray:[],
  }*** <---- Here is the error, setting props
        
  const bigArray = ref(props.BigArray);
</script>

ITsInterface.ts

BigArray?: string[] | null;

寻找在这种情况下将空数组设置为 prop 的正确方法：

• Vue.js3
• 作文API
• TypeScript
• 在脚本标签中设置

Answer 1

如vue文档所示here。

你可以这样做：

const props = defineProps({
  bigArray: {
    type: Array,
    default: []
  }
});

这定义了一个名为 bigArray 的道具，并将默认值设置为空数组。

Answer 2

import { withDefaults, defineProps} from "vue";

interface Props {
    bigArray?: string[]
}

const props = withDefaults(defineProps<Props>(), {
    bigArray: () => []
})

console.log(props.bigArray);

您只需添加 () => arrow-function 即可。

这在 vue 文档中显示 here。

如果你想让 prop 成为可选的（因为它应该有默认值），请在 variable-name 之后使用 ?。这将确保控制台中没有不必要的警告。