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

【问题标题】：Why aren't props being passed to a child component in vue?为什么不将道具传递给 vue 中的子组件？
【发布时间】：2021-06-13 17:44:28
【问题描述】：

为什么没有将 props 传递给 InventorySectionGroupItemComponent 中的组件

https://codesandbox.io/s/cgvbc

有一个警告：

[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 讨厌长组件名称（如果我错了，请纠正我）（更新沙箱）。

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案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

【讨论】：

Forrgot to fork 但设法修复它（我的猜测是它与组件名称的长度有关）。