Vue3什么是全局组件及如何使用

在 Vue 3 中，全局挂载指的是将组件、插件或其他配置全局注册，使其在整个应用程序中都能被访问，而不需要在每个组件中单独导入或注册。这使得应用结构更加模块化，易于管理。

1. 全局组件注册

可以全局注册组件，这样就可以在应用的任何地方使用它们，而不需要每次都导入。

javascript
// main.js 或 main.ts (入口文件)
import { createApp } from 'vue';
import App from './App.vue';
import MyComponent from './components/MyComponent.vue';

const app = createApp(App);

// 全局注册组件
app.component('MyComponent', MyComponent);

app.mount('#app');

注册后，可以在应用中的任何模板中使用 <MyComponent />，无需再次导入。

2. 全局插件注册

如果你有插件（例如 Vue Router、Vuex 或自定义插件），可以全局注册它们，使得它们在整个应用中都可以使用。

javascript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';  // 假设你有 Vue Router
import store from './store';    // 假设你有 Vuex

const app = createApp(App);

app.use(router);
app.use(store);

app.mount('#app');

3. 全局指令

你可以创建自定义全局指令，并将其注册到全局中，这样在任何组件的模板中都可以使用。

javascript
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 注册全局指令
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});

app.mount('#app');

现在，可以在应用中的任何模板里使用 v-focus 指令。

4. 全局属性

你还可以定义全局属性，这些属性在任何组件中都可以访问。

javascript
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 设置全局属性
app.config.globalProperties.$myGlobalVar = 'Hello, Vue!';

app.mount('#app');

在任何组件中，你都可以这样访问这个属性：

javascript
export default {
  mounted() {
    console.log(this.$myGlobalVar);  // 输出 "Hello, Vue!"
  }
}

5. 全局混入

你可以创建全局混入，这样它在所有组件中都可用。这个方法适用于在应用中共享可复用的功能。

javascript
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.mixin({
  data() {
    return {
      globalData: '这是全局可用的'
    };
  },
  created() {
    console.log('全局混入创建!');
  }
});

app.mount('#app');

6. 全局过滤器（Vue 3 中已弃用）

过滤器在 Vue 3 中已被弃用，不推荐使用。建议使用计算属性或方法来替代过滤器。