Vue全局注册子组件在父组件内部无法渲染问题求解

问题原因及解决方案 #

1. 修正脚本加载顺序

当前你先加载组件文件再加载Vue CDN，组件定义时Vue构造函数还未初始化，存在渲染隐患，必须先加载Vue再加载组件：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="<?= Helpers::asset('assets/js/vue/componenteA.js'); ?>"></script>
<script src="<?= Helpers::asset('assets/js/vue/componenteB.js'); ?>"></script>

2. 修正组件注册作用域

在根Vue实例的components选项中注册的组件，仅能在根实例对应的模板（#app-welcome包裹的内容）中使用，子组件componenteA的模板无法访问根实例注册的组件，二选一解决即可：

• 方案一：全局注册componenteB，注册后所有组件均可直接调用
  在componenteB.js文件中，组件定义完成后添加全局注册代码：

Vue.component('componenteB', componenteb)

• 方案二：在componenteA内部单独注册componenteB
  修改componenteA的定义，新增components配置项：

const componenteA = {
  // 新增子组件注册
  components: {
    'componenteB': componenteb
  },
  template: `<div>
    <p>xxx</p> 
    <!-- v-for必须绑定key属性，避免渲染异常 -->
    <div v-for="d in DEMO" :key="d.id">
      <componenteB :x="d"></componenteB>
    </div>
  </div>`,
  props: {
    x: { type: Object }
  },
  // data必须为函数，返回数据对象，同时定义模板中用到的DEMO变量
  data() {
    return {
      DEMO: [
        // 填充你的遍历数据源
      ]
    }
  }
}

3. 修正其他语法错误

• 保证组件注册名和模板中使用的标签名大小写完全匹配，推荐统一用kebab-case格式（如<componente-b>）兼容性更强
• 修复componenteA代码中props和data之间缺失的逗号、data未返回对象等语法问题
• 模板中用到的DEMO变量必须在data或props中定义，否则会触发报错中断后续渲染

内容的提问来源于stack exchange，提问作者Israel Zebulon