组件传入非法字符,导致页面不能正常显示。
<Icon v-if="item.meta.icon" :icon="item.meta.icon">{{ item.meta && item.meta.title }}</Icon>
Icon 组件内容如下
<template>
<el-icon :size="20">
<component :is="Icon" />
</el-icon>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps({
icon: String,
default: "",
});
const Icon = computed(() => props.icon);
</script>
<style lang="scss" scoped></style>
问题 :item.meta.icon 传入了值为 http://xxx/328322a1fdb4fa7463caaf4dfabe2e36.png 的这个字符串,导致不能正常显示页面。属于组件传入了非法字符,导致不能正常渲染。
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('http://xxx/328322a1fdb4fa7463caaf4dfabe2e36.png') is not a valid name.
重要
一定不要忽略报错信息提示。