javascript - 组件不处理空道具

Question

我有一个组件data.table.vue和其他组件，例如abc.vue和xyz.vue。

在这个 data.table.vue 中，根据它接收到的道具来渲染一个段落。但是，并不是我的组件abc.vue和xyz.vue都会发送道具。只有abc.vue需要发送道具。例如：

在 abc.vue 中：

<template>
   <data-table 
     :isShown=true
   <data-table>
</template>

在 xyz.vue 中没有道具

<template>
   <data-table 
   </data-table>
</template>

在 data.table.vue 中

 <p v-if="isShown"> hello world </p>

但是我希望始终为xyz组件显示此段落.. 并且仅针对abc.vue，我希望此段落根据道具 isShown 呈现。但是，即使在xyz.vue中，它的渲染也取决于发送的道具在abc.vue中..

请帮忙 ..

Answer 1

您可以像这样设置默认道具。

   export default {
     props: {
        isShown: {
        type: Object,
        default: true
       }
    }
}

没有传递任何道具时将采用默认值。

Answer 2

对于具有复合 API 的Vue3，您可以像这样设置默认道具：

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    isShown: {
      type: boolean,
      default: true
    },
  },
  setup() {},
})
</script>

并使用脚本设置

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    isShown: boolean
  }>(),
  {
    isShown: true
  }
)
</script>