为什么不将道具传递给 vue 中的子组件？

Question

为什么不将 props 传递给 InventorySectionGroupItemComponent

中的组件

?

有一个警告：

[Vue warn]: Failed to mount component: template or render function not defined.   
found in        
---> <InventorySectionGroupItemComponent>    
       <InventorySectionGroupComponent> at /src/components/InventorySectionGroupC.vue    
         <InventorySectionComponent> at /src/components/InventorySectionC.vue    
           <ChromePage> at /src/components/ChromePage.vue    
             <App> at /src/App.vue    
               <Root>

vue 讨厌长组件名称（如果我错了请纠正我）（已更新沙箱）。

Answer 1

组件名称与错误无关。问题是 InventorySectionGroupC.vue incorrectly registers VueGridLayout:

import VueGridLayout from 'vue-grid-layout';

export default {
  name: "InventorySectionGroupComponent",
  components: {
    VueGridLayout, // incorrect registration
  },
}

vue-grid-layout's installation guide 显示如何注册组件：

import VueGridLayout from 'vue-grid-layout'

export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  }
}

作为旁注，grid-layout 和 grid-item 实际上用于 InventorySectionC.vue （不是 InventorySectionGroupC.vue），所以他们的组件注册应该移到那个组件中。

demo

为什么不将道具传递给 vue 中的子组件？

Why aren't props being passed to a child component in vue?

vue.js

vue-component

vuejs2