Vue3在单个文件组件中的元素上存在css类时，将其添加到dom会导致渲染失败，无效的VNode类型：Symbol

如何解决Vue3在单个文件组件中的元素上存在css类时，将其添加到dom会导致渲染失败，无效的VNode类型：Symbol

编辑10/7/2020：我永远无法使它正常工作。最终回到ASP.NET Razor服务器渲染，尽管这不是我想要的该组件。如果将来有人有什么想法，我会很高兴。

因此，我要制作一个文件组件，该组件代表网站上的通知面板。该站点主要是使用ASP.NET Core的Razor视图引擎在服务器端生成的。该通知面板将是添加到该站点的第二个Vue组件，因为它需要比服务器呈现的组件所允许的响应/响应能力更高。

该组件未在其定义中定义样式，而是使用了site.css标签中添加的全局<head>。

问题...

我注意到Vue 3的组件渲染中有一些非常奇怪的行为。以下是我组件的净化版本：

NotificationPanel.vue

<template>
    <div class="custom-item-inner custom-rounded">
        <p class="custom-h2style">
            Notifications
        </p>
        <div class="custom-section-divide">
            <p class="custom-section-title">Section Title</p>
            <p class="custom-desc">Lorem ipsum dolor sit amet,consectetur adipiscing elit. Donec porttitor,odio sit amet volutpat pretium.</p>
            <div class="custom-item-link">
                Perform Action
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "notifications-panel",data() {
            return {
                placeholder: ""
            }
        },mounted() {
            console.log("Hello world");
        }
    }
</script>

我希望这将呈现给页面的组件，并且全局定义的CSS将应用于此标记。相反，我在开发人员控制台中看到警告：

箭头指向的白线是组件的容器，该容器在CSHTML中定义。从控制台输出来看，该组件本身并未呈现，但已明确安装。

这是一个很奇怪的部分：如果我从模板中间的class="custom-section-title"标记中删除了<p>，这就是呈现的内容：

到底发生了什么？这对我来说绝对是零...

有什么想法吗？谢谢

其他详细信息：

这是在cshtml代码中使用组件的方式。

<!-- Notifications Block-->
<div class="col-12 col-lg-4 col-xl-3 sidenav custom-item custom-notifys">
    <notifications-panel />
</div>

在main.js中，我是从'vue / dist / vue.esm-browser'导入createApp的，向我here解释过。

Vue3在单个文件组件中的元素上存在css类时，将其添加到dom会导致渲染失败，无效的VNode类型：Symbol

如何解决Vue3在单个文件组件中的元素上存在css类时，将其添加到dom会导致渲染失败，无效的VNode类型：Symbol

相关推荐