Vue.js router-view 传递的 prop 数据应该在浏览器的开发工具中可见吗？

Question

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

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

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

这是它的外观示例：

Answer 1

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

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

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

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

Answer 2

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

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

丑陋终会过去。耶。希望这对其他人有帮助。

Vue.js router-view 传递的 prop 数据应该在浏览器的开发工具中可见吗？

Vue.js should prop data passed on router-view be visible in devtools in browsers?

javascript

vue.js

vue-router