在vuejs中，将null传递给组件中所需的props的最佳实践是什么？

cs7cruho 于 2023-05-18 发布在 Vue.js

关注(0)|答案(2)|浏览(151)

堆栈：vuejs（3.2）+ composition API + Typescript + Visual studio代码
文件类型.ts：

export class GeographicCoordinate {
  latitude: number;
  longitude: number;
  altitude?: number;

  constructor(latitude: number, longitude: number, altitude?: number) {
    this.latitude = latitude;
    this.longitude = longitude;
    this.altitude = altitude;
  }
}

component1.vue:

import { GeographicCoordinate } from '@/interfaces/type';
const props = defineProps({
  show: { type: Boolean, required: true },
  geographicCoordinate: {
    type: Object as PropType<GeographicCoordinate | null>, 
    required: true }
});

page.vue:

<template>
  <component1
    v-model:show="show"
    :geographic-coordinate="clickedGeographicCoordinate" @save-event="saveEvent">. 
  </component1>
</template>
<script lang="ts" setup>
  import { GeographicCoordinate } from '@/interfaces/type';
  var show = ref(false);
  var clickedGeographicCoordinate = ref<GeographicCoordinate | null>(null);
</script>

clickedGeographicCoordinate变量初始化为null。而clickedGeographicCoordinate是由用户点击生成的。
变量show用于控制component1的可见性。当show设置为true时，clickedGeographicCoordinate保证不为null。现在这里的问题是，vue在浏览器中提出警告说
[Vue warn]：无效属性：属性“geographicCoordinate”的类型检查失败。应为Object，但得到Null
该如何处理这种情况？

vue.js

来源：https://stackoverflow.com/questions/76206723/what-is-the-best-practice-to-pass-null-to-a-required-props-in-component-in-vuejs

2条答案

按热度按时间

vd8tlhqk1#

如果您使用的是Typescript组合API，您应该能够这样定义您的props：

import { GeographicCoordinate } from '@/interfaces/type';

const props = defineProps<{
  show: boolean;
  geographicCoordinate: null | GeographicCoordinate;
}>();

使用Typescript定义可以更容易地定义 prop 类型并使用null作为 prop 类型。如果你碰巧在API中使用null作为prop类型，它只会在运行时禁用prop类型检查。
此外，您可以根据是否定义了geographicCoordinate有条件地显示组件，这样您就不需要Assert和检查这两种类型是否都可以在组件中使用

赞(0）回复(0）举报 2023-05-18

ryevplcw2#

可以通过v-if处理component 1的可见性，当show为false或geographicCoordinate为null时，组件不显示和处理数据。

赞(0）回复(0）举报 2023-05-18