Vue2本地组件间引用问题：<foo>未识别警告排查

Hey，我碰到过这个问题好多次了！你看到的警告里提的递归组件其实是个“干扰项”——你加了name但问题没解决，说明根本不是递归的锅，核心问题是你的<foo>组件没在正确的上下文里注册。下面是几个最常见的排查和解决步骤：

1. 确认组件在父组件的components选项中正确注册 #

如果你是在另一个组件里使用<foo>，必须把Foo组件声明在父组件的components选项里，Vue才会识别它。比如：

// 先定义Foo组件
const Foo = {
  name: 'foo', // 这个name只有递归调用自己时才需要，这里可以先保留
  template: '<div>我是Foo组件内容</div>'
}

// 父组件（使用<foo>的组件）
const ParentComponent = {
  template: '<div><foo></foo></div>',
  components: {
    Foo // ES6简写，等价于 'foo': Foo，Vue会自动把驼峰转成短横线标签<foo>
  }
}

注意：注册的组件名要和模板里的标签对应——如果注册的是Foo，模板用<foo>是没问题的（Vue的自动转换）；如果注册时写的是'foo'，那模板用<foo>或<Foo>都可以。

2. 检查组件定义的顺序（同文件多组件场景） #

如果是在同一个文件里同时定义父组件和Foo组件，一定要先定义Foo，再定义使用它的父组件。比如下面的错误写法会导致报错：

// ❌ 错误顺序：父组件先定义，此时Foo还不存在
const ParentComponent = {
  template: '<foo></foo>',
  components: { Foo }
}

const Foo = {
  name: 'foo',
  template: '<div>Foo</div>'
}

改成正确的顺序：

// ✅ 正确顺序：先定义Foo
const Foo = {
  name: 'foo',
  template: '<div>Foo</div>'
}

const ParentComponent = {
  template: '<foo></foo>',
  components: { Foo }
}

3. 全局注册组件（如果需要跨组件使用） #

如果你想在整个应用里都能直接用<foo>，不需要每个父组件都注册，那要在创建Vue实例之前全局注册：

// 全局注册Foo组件
Vue.component('foo', {
  name: 'foo',
  template: '<div>Foo</div>'
})

// 再创建Vue实例
new Vue({
  el: '#app'
})

4. 关于递归组件的澄清 #

警告里提到的递归组件场景，只有当Foo组件自己的模板里调用了<foo>（比如做树形组件、菜单组件这种递归结构）时，才需要给Foo组件加name选项。你的情况显然不是递归调用，所以加name解决不了问题，这只是Vue给出的一个“可能场景”提示而已。

先按上面的步骤排查，基本就能解决这个警告了！

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