vue3 props 设置type 为 boolean, 然后传入undefined

在 Vue3 中，如果你将一个 prop 的 type 设置为 boolean，但是传入 undefined，那么它会被视为一个有效的值，但是它的值将是 undefined。这意味着你的组件可以接受一个未定义的布尔值，并且不会引发类型错误。

例如，假设你有一个组件：

<template>
  <div>{{ show }}</div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean
    }
  }
}
</script>

如果你将 show 属性传入 undefined：

<my-component :show="undefined" />

那么组件将会渲染为：

<div>undefined</div>

因此，你需要在组件中检查 show 属性是否是 undefined，并根据需要采取适当的措施。

相关问题

将这个转换为vue3

要将这个组件转换为 Vue 3 版本，主要需要做以下几个方面的调整：

1. **引入新的组合式 API (` Composition API`)**：Vue 3 中推荐使用组合式 API 来替代选项式 API。
2. **更新生命周期钩子**：`created` 钩子在 Vue 3 中可以通过 `onMounted` 或者 `onBeforeMount` 来实现。
3. **更新模板语法**：虽然 Vue 3 与 Vue 2 在模板上非常相似，但在某些方面做了改进和优化。

以下是转换后的代码：

<template>
  <a-radio-group v-if="tagType == 'radio'" @change="handleInput" :value="getValueSting" :disabled="disabled">
    <a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio>
  </a-radio-group>
  <a-radio-group v-else-if="tagType == 'radioButton'" buttonStyle="solid" @change="handleInput" :value="getValueSting" :disabled="disabled">
    <a-radio-button v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio-button>
  </a-radio-group>
  <a-select v-else-if="tagType == 'select'" :getPopupContainer="getPopupContainer" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" @change="handleInput">
    <a-select-option :value="undefined">请选择</a-select-option>
    <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
      <span style="display: inline-block; width: 100%" :title="item.text || item.label">
        <span v-if="isEllipsis">{{ (item.text.length > ellipsisLength ? item.text.substring(0, ellipsisLength) + '...' : item.text) || (item.label.length > ellipsisLength ? item.label.substring(0, ellipsisLength) + '...' : item.label) }}</span>
        <span v-else>{{ item.text || item.label }}</span>
      </span>
    </a-select-option>
  </a-select>
  <a-select v-else-if="tagType == 'selectNoAll'" :getPopupContainer="getPopupContainer" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" @change="handleInput">
    <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
      <span style="display: inline-block; width: 100%" :title="item.text || item.label">{{ item.text || item.label }}</span>
    </a-select-option>
  </a-select>
  <a-select v-else-if="tagType == 'selectClear'" allow-clear :getPopupContainer="getPopupContainer" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" @change="handleInput">
    <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
      <span style="display: inline-block; width: 100%" :title="item.text || item.label">{{ item.text || item.label }}</span>
    </a-select-option>
  </a-select>
  <a-select v-else-if="tagType == 'selectOtherClear'" allow-clear :getPopupContainer="getPopupContainer" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" @change="handleInput">
    <a-select-option :value="undefined">请选择</a-select-option>
    <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
      <span style="display: inline-block; width: 100%" :title="item.text || item.label">
        <span v-if="isEllipsis">{{ (item.text.length > ellipsisLength ? item.text.substring(0, ellipsisLength) + '...' : item.text) || (item.label.length > ellipsisLength ? item.label.substring(0, ellipsisLength) + '...' : item.label) }}</span>
        <span v-else>{{ item.text || item.label }}</span>
      </span>
    </a-select-option>
  </a-select>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api';

const props = defineProps({
  dictCode: String,
  placeholder: String,
  triggerChange: Boolean,
  disabled: Boolean,
  value: [String, Number],
  type: String,
  isEllipsis: Boolean,
  ellipsisLength: Number,
  getPopupContainer: {
    type: Function,
    default: (node) => node.parentNode
  }
});

const emit = defineEmits(['input', 'change']);

const dictOptions = ref([]);
const tagType = ref('');

// 根据传入的type属性确定标签类型
watch(() => props.type, () => {
  if (!props.type || props.type === 'list') {
    tagType.value = 'select';
  } else {
    tagType.value = props.type;
  }
}, { immediate: true });

// 计算属性值
const getValueSting = computed(() => {
  return props.value != null ? props.value.toString() : undefined;
});

// 获取字典数据
const initDictData = async () => {
  if (getDictItemsFromCache(props.dictCode)) {
    dictOptions.value = getDictItemsFromCache(props.dictCode);
    return;
  }

  const res = await ajaxGetDictItems(props.dictCode, null);
  if (res.success) {
    dictOptions.value = res.result;
  }
};

onMounted(initDictData);

// 处理输入事件
const handleInput = (e) => {
  let val;
  if (tagType.value === 'radio') {
    val = e.target.value;
  } else {
    val = e;
  }

  console.log(val);
  if (props.triggerChange) {
    emit('change', val);
  } else {
    emit('input', val);
  }
};

defineExpose({
  setCurrentDictOptions: (options) => {
    dictOptions.value = options;
  },
  getCurrentDictOptions: () => dictOptions.value
});
</script>

<style scoped></style>

### 主要更改点：
1. **组合式 API (` Composition API`)**：
- 使用 `ref` 和 `computed` 替换 `data` 和 `computed`。
- 使用 `onMounted` 代替 `created`。
- 使用 `watch` 监听 `props.type` 的变化，并设置默认值。

2. **Event Emission**：
- 使用 `defineEmits` 定义事件发射器，并通过 `emit` 发送事件。

3. ** expose 方法**：
- 使用 `defineExpose` 暴露方法给父组件调用。

这样，组件就成功从 Vue 2 转换到了 Vue 3，并且利用了 Vue 3 新的特性进行优化。