vue3全局注册方法

Vue3中，全局注册组件通常通过修改`app.js`或`main.js`文件来完成，这个过程也被称为“插件化”或“注册全局组件”。主要有以下几种方式：

1. **混入（Mixins）**：
使用`Vue.mixin()`方法将对象作为公共功能添加到所有组件实例上，这包含了生命周期钩子、自定义指令等。

import { createApp } from 'vue'
const myMixin = {
  data() {
    return {
      message: 'Hello from mixin'
    }
  }
}
createApp(App).mixin(myMixin).mount('#app')

2. **全局注册组件**：
可以使用`component`选项直接注册组件，使其在整个应用范围内可用。

import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

createApp({
  components: {
    MyComponent
  }
}).mount('#app')

3. **使用Vue.extend()创建组件工厂**：
创建一个函数返回一个构造函数，用于生成新的组件实例。

function MyCustomComponent(props) {
  // 组件配置...
}

const CustomComponent = Vue.extend(MyCustomComponent)
customCompInstance = new CustomComponent()

4. **使用setup()钩子**：
对于Composition API的应用，可以在`setup()`钩子中导入并导出组件，并在模板中使用它。

// setup.js
export default {
  setup() {
    return () => (/* 返回组件组件声明或渲染函数 */);
  },
};

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import setup from './setup';

createApp(App)
  .use(setup)
  .mount('#app');