为什么我的 vue 组件没有出现在 vue-devtools 中并呈现为 data-v-xxx div？答案

【问题标题】：Why is my vue component not showing up in vue-devtools and rendered as a data-v-xxx div?为什么我的 vue 组件没有出现在 vue-devtools 中并呈现为 data-v-xxx div？
【发布时间】：2020-09-25 22:51:00
【问题描述】：

我目前遇到的问题是我的 Vue 组件没有按照我的预期呈现。

我将尝试澄清我的意思，因为我意识到它很模糊：

目前我有一个 Vue 组件，我使用它来渲染：

if (document.querySelector('.dishes')) {
    Vue.component(
        'DishesList',
        require('../components/DishesList').default
    );

    new Vue({
        el: '#dishes',
    });
}

这确实有效，因为正在加载此组件中指定的内容。加载它产生的 HTML 是：

<div class="dishes">
    <div id="dishes">
        <div data-v-xxxxxx>
            .....
        </div>
    </div>
</div>

但这不是我所期望的。每当我以前使用过 Vue 时，HTML 中显示的组件仍然是这样的：

<div class="dishes">
    <div id="dishes">
        <dishes-list></dishes-list>
    </div>
</div>

dishes-list 组件是这样的（我过滤掉了一些东西）：

<template>
    .....
</template>

<script>
    import Dish from "./Dish";

    export default {
        name: "DishesList",
        props: ["categories"],
        data: function () {
            return {
                search:'',
                order: {}
            }
        },
        components: {
            Dish,
        },
        methods: {

        },
        mounted() {

        },
        computed: {
        }

    }
</script>

<style lang="scss" scoped>
    .category {
        margin: 20px 0;
    }
</style>

这也会导致 Vue 开发工具无法看到我的 dishes-list 组件。唯一被识别的是组件<root>，其中没有任何内容。我的问题是：是什么导致 Vue 将组件加载为 <div data-v-xxxx> 而不是我之前见过的 <dishes-list>？

希望这一切都有意义。如果我可以做任何事情来澄清这个问题，请告诉我，因为我对 Stackoverflow 还是很陌生，我正在努力做到最好。我对 Vue 也很陌生，所以如果你知道答案，请记住这一点。

【问题讨论】：

您可以粘贴您的 DishesList 组件的一部分吗？ <dishes-list> 不是有效的 HTML 标记（除非您使用 WebComponents，这不是 Vue 默认发生的事情）。您的组件可能呈现为<div>。
我添加了关于菜组件的一些信息，我删除了 html，但我不确定是否也应该包含其中的一些信息？

标签： vue.js vue-component

【解决方案1】：

我找到了针对我的具体情况的答案，所以我将解释问题出在哪里以及我如何解决它，以防其他人遇到同样的问题：

我遇到的问题是我在 dom 中有另一个更高级别的 vue 组件渲染。为了说明这一点：

<body>
<div id="app">
    <div>
        <div>
            <div>
                <div id="dishes">
                    <div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这个 id=app 的 div 正在运行 vue 的“实例”（如果你可以这样称呼它），因此开发工具停止搜索任何其他实例。就我而言，由于该组件不是该 div 的直接子组件，因此根本没有发现我真正的组件。所以简而言之，如果有人遇到这样的问题：检查你是否没有加载任何其他可能会干扰你想在你的开发工具中看到的组件。

*我已经编辑了这个问题，以更好地反映我想问的问题，但我仍然要感谢所有回复的人，因为你确实让我朝着正确的方向前进。

【讨论】：

【解决方案2】：

如果您在浏览器的 Elements 选项卡中检查 HTML，那么看到 <div data-v-xxxxxx> 是正确的，这是正常的。

data-v-xxxxxx 部分只是表明该组件使用了作用域 CSS。

当 HTML 首次加载到浏览器中时，它将包含 <dishes-list></dishes-list> 标记。当您使用 new Vue(...) 启动 Vue 时，它将解析元素 #dishes 内的模板并替换其内容。新内容通常是标准 HTML 元素，组件名称将消失。

要亲自查看，请尝试通过注释掉创建实例的行来禁用 Vue。您应该在 HTML 中看到 <dishes-list></dishes-list>。看到那个元素只是表明 Vue 没有运行那个模板。

【讨论】：

很高兴知道，但我仍然想知道为什么 vuedevtoola 无法识别菜肴列表组件。你碰巧知道是什么原因造成的吗？这对我来说很奇怪，因为正如你所提到的，模板实际上正在正确呈现。
@killermi200 这里没什么可做的。 stackoverflow.com/questions/40186095 有一些建议，但没有一个看起来非常适合您的症状。重新启动浏览器值得一试。我假设您使用的是 Vue 和 devtools 的最新版本，但如果其中任何一个是旧版本，它可能就是这样。另外，尝试右键单击 UI 中的列表并在浏览器的上下文菜单中查找 'Inspect Vue Component'，看看会发生什么。