为什么我的vue组件没有出现在vue-devtools中并呈现为数据-v-xxx div？
我目前遇到的问题是，我的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 devtools无法看到我的dishes-list组件。唯一被识别的是没有任何内容的组件<root>。我的问题是:是什么原因导致Vue将组件加载为<div data-v-xxxx>而不是我以前见过的<dishes-list>？
希望这一切都有意义。如果我能做任何事情来澄清这个问题，请告诉我，因为我对Stackoverflow非常陌生，我正在努力充分利用它。我对Vue也很陌生，所以如果你知道答案的话，试着记住这一点。
回答 2
Stack Overflow用户
发布于 2020-06-07 15:15:12
我找到了我的具体情况的答案，所以我会解释什么是错的，我是如何解决的，以防其他人遇到同样的问题：
我遇到的问题是，我在dom中有一个更高级别的vue组件呈现。为了说明这一点：
<body>
<div id="app">
<div>
<div>
<div>
<div id="dishes">
<div>
</div>
</div>
</div>
</div>
</div>
</div>
这个带有id=app的div正在运行一个vue的“实例”(如果你可以这样称呼它的话)，因此开发工具停止搜索任何其他实例。在我的例子中，由于组件不是这个div的直接子组件，所以我的真正组件根本没有被发现。因此，简而言之，如果有人遇到这样的问题:检查您没有加载任何其他组件，这些组件可能会与您想要在devtools中看到的组件进行交互。
*我编辑了这个问题，以更好地反映我想问的问题，但我还是要感谢大家的回应，因为你们确实让我走上了正确的道路。
Stack Overflow用户
发布于 2020-06-07 00:35:48
如果您正在检查浏览器元素选项卡中的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没有运行该模板。
https://stackoverflow.com/questions/62237226
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号