Vue.js应该在路由器视图中传递的数据在浏览器的devtools中可见吗？

Question

我将一些道具传递给我的路由器视图组件，如下所示：

<router-view :zipchange="zipchange" :accountitems="accountitems" :accountloaded="accountloaded" :profilepic="profilepic" />

我刚刚注意到，当我在浏览器开发工具中检查一个元素时，所有这些数据都显示在每个路径/页面的顶级div上......这是应该的样子吗？没有其他道具（未在router-view组件上传递的道具）以这种方式显示......

以下是一个示例：

Answer 1

这是预期的行为。将props传递给路由器视图时，prop的值也会作为属性添加到组件的根元素中。

如果您不希望将道具添加为属性，则应对传递给v-bind的参数使用prop modifier：

<router-view 
  :zipchange.prop="zipchange" 
  :accountitems.prop="accountitems" 
  :accountloaded.prop="accountloaded" 
  :profilepic.prop="profilepic" 
/>

这将绑定DOM元素属性的prop值而不是其属性。

Answer 2

好吧，我找到了隐藏这些丑陋属性的方法：你必须在子路线上包含道具，否则它将被注入div中。我注意到信息不在我定义道具的页面上，只在那些没有定义的页面上（我没有使用这些道具所以认为它们会被忽略）。例如，在我的＆＃34; Dashboard.vue＆＃34;页面，如果我像这样添加道具：

export default {
  name: 'dash',
  props: ['profilepic'], //<- This must be present on the child
  components: {
    mycomps
  },
  data () {
    return {
      dataitem: somvalue,
// ETC

丑陋的人会消失。好极了。希望这有助于其他人。