在components文件建中新建一个单独vue组件，如何注册到vue全局

www.jswusn.com Other 2025-08-23 11:52:34 38次浏览
网站首页 >> 技术分享 >> Other

1. 在components文件建中新建一个单独vue组件，如何注册到vue全局

组件文件结构

首先，我们创建如下文件结构：

src/
  components/
    MyCustomComponent/
      MyCustomComponent.vue  # 组件实现
      index.js               # 组件导出和注册

组件文件内容

1. MyCustomComponent.vue（通用组件文件）

<template>
  <div class="my-custom-component">
    <h3>{{ title }}</h3>
    <p>{{ content }}</p>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'MyCustomComponent',
  props: {
    title: {
      type: String,
      default: '默认标题'
    },
    content: {
      type: String,
      default: '默认内容'
    }
  },
  methods: {
    handleClick() {
      this.$emit('custom-click', '组件被点击了')
    }
  }
}
</script>

<style scoped>
.my-custom-component {
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

2. index.js（组件导出文件）

import MyCustomComponentfrom'./MyCustomComponent.vue'

// 导出组件
exportdefaultMyCustomComponent

// 导出安装函数，用于全局注册
exportfunctioninstall(Vue) {
if (install.installed) return
  install.installed = true
Vue.component(MyCustomComponent.name, MyCustomComponent)
}

// 创建带有install方法的组件对象，便于Vue.use()注册
const plugin = {
  install
}

export { plugin asdefault }

全局注册方式

Vue 2 全局注册

在Vue 2中，我们通常在main.js中进行全局注册：

import Vuefrom'vue'
importAppfrom'./App.vue'
// 导入组件
importMyCustomComponentfrom'./components/MyCustomComponent'

// 方式1：使用Vue.component全局注册
Vue.component(MyCustomComponent.name, MyCustomComponent)

// 方式2：使用install方法注册（更推荐）
// Vue.use(MyCustomComponent)

newVue({
el: '#app',
render: h =>h(App)
})

Vue 3 全局注册

在Vue 3中，全局注册方式有所不同，需要通过createApp返回的app实例进行注册：

import { createApp } from'vue'
importAppfrom'./App.vue'
// 导入组件
importMyCustomComponentfrom'./components/MyCustomComponent'

// 创建app实例
const app = createApp(App)

// 方式1：使用app.component全局注册
app.component(MyCustomComponent.name, MyCustomComponent)

// 方式2：使用install方法注册（更推荐）
// app.use(MyCustomComponent)

// 挂载应用
app.mount('#app')

使用方式

注册完成后，就可以在项目的任何组件中直接使用，无需再次导入：

<template>
  <div>
    <my-custom-component 
      title="我的自定义组件" 
      content="这是一个全局注册的组件"
      @custom-click="handleCustomClick"
    />
  </div>
</template>

<script>
export default {
  methods: {
    handleCustomClick(message) {
      console.log(message)
    }
  }
}
</script>