Vue3 Options API模式下同JS文件父组件如何引入子组件

两个组件定义在同一个JS文件中时，不需要额外执行import导入操作，直接在父组件内完成注册、使用两步即可：

• 第一步：在父组件的components配置项中注册子组件，直接引用同作用域下定义好的子组件变量即可
• 第二步：在父组件的模板字符串中，以自定义标签的形式引入子组件节点

完整修正代码 #

export const ParentCompent = {
  // 注册同文件下的子组件
  components: {
    ChildCompent
  },
  template: `
  <div>
    <div>Parent Component</div>
    <!-- 模板中使用子组件，驼峰/短横线命名标签都可正常解析 -->
    <ChildCompent />
  </div>   
  `
}

export const ChildCompent = {
  template: `
  <div>child Component</div>   
  `
}

注意事项 #

• 上述components里的写法是ES6对象属性简写，完整写法为ChildCompent: ChildCompent，键名是组件注册名，值是子组件的配置对象
• 字符串模板环境下，驼峰式<ChildCompent />和短横线分隔式<child-compent />标签都能被Vue正常解析；如果是直接写在原生HTML里的DOM模板，推荐统一使用短横线分隔的标签名，避免浏览器原生标签解析规则导致的组件不生效问题

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