如何在HTML文件中注册Vue.js组件并自定义使用位置？

你当前的问题是直接将组件作为根应用挂载，导致#app内的原有结构被完全替换。要实现注册组件后在任意指定位置使用，需要调整根应用的创建方式，并正确注册组件，具体修改如下：

步骤1：调整根应用结构 #

不再将MyComponent作为根组件，而是创建一个基础的根应用实例，保留#app内的DOM结构，仅替换其中的组件标签。

步骤2：全局注册组件 #

通过app.component()方法全局注册组件，这样就能在#app范围内的任意位置使用该组件。

修改后的完整代码 #

index.html #

<body>
    <div id="app">
        <!-- 使用自定义组件标签 -->
        <my-header></my-header>
        <nav></nav>
        <main></main>
        <footer> </footer>
    </div>
</body>

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<script type="module">
  import { createApp } from 'vue'
  import MyHeader from './header.js'

  // 创建根应用实例
  const app = createApp({})

  // 全局注册组件，第一个参数是组件标签名，第二个是组件对象
  app.component('my-header', MyHeader)

  // 挂载根应用到#app
  app.mount('#app')
</script>

header.js（无需修改） #

export default {
  data() {
    return { count: 0 }
  },
  template: `<div>count is {{ count }}</div>`
}

额外说明 #

• 如果只需要在某个局部组件内使用该组件，可以采用局部注册的方式，在对应组件的components选项中声明：

  // 示例：在根组件中局部注册
  const app = createApp({
    components: {
      MyHeader
    },
    template: `
      <my-header></my-header>
      <nav></nav>
      <main></main>
      <footer></footer>
    `
  })
  

• 组件标签名建议使用短横线分隔的命名（比如my-header），符合Vue组件命名规范，同时避免与原生HTML标签冲突。

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