javascript - Vue.js 应该在浏览器的 devtools 中看到在路由器 View 上传递的 prop 数据吗？

Question

我像这样将一些 Prop 传递给我的路由器 View 组件:

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

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

这是它的外观示例:

Answer 1

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

如果您不想将 Prop 添加为属性，您应该使用 prop modifier关于传递给 v-bind 的参数:

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

这会将 prop 值绑定(bind)到 DOM 元素的属性而不是它的属性。