Vue.js应该在浏览器中的devtools中显示传递给router-view的道具数据吗？

Question

我传递了几个道具到我的路由器视图组件，像这样：

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

我只是注意到，当我检查的浏览器开发工具的元素，所有的数据都显示连接到顶层每个路线/页面中的div ...是这样的吗？没有其他道具（那些在router-view组件未通过）都出现了这样...

这里是什么样子的例子：

Answer 1

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

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

丑陋就会消失。好极了。希望这可以帮助别人。

Answer 2

这是正常现象。将道具传递给路由器视图时，道具的值也会作为属性添加到组件的根元素。

如果你不想道具被添加为属性做，你应该使用转嫁到v-bind参数的prop modifier：

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

这将绑定的DOM元素的属性的道具价值，而不是其属性。