在Vue3中创建和使用全局组件的实现方式

npm init vue@latest

<template>
  <div class="my-global-component">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'MyGlobalComponent',
  data() {
    return {
      message: 'Hello from Global Component!'
    };
  }
};
</script>

<style scoped>
.my-global-component {
  font-family: Arial, sans-serif;
  color: #3498db;
}
</style>

import { createApp } from 'vue';
import App from './App.vue';
import MyGlobalComponent from './components/MyGlobalComponent.vue';

const app = createApp(App);

app.component('MyGlobalComponent', MyGlobalComponent);

app.mount('#app');

<template>
  <div id="app">
    <MyGlobalComponent />
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
  <div id="app">
    <CustomButton @click="handleButtonClick">Click Me</CustomButton>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleButtonClick() {
      alert('Button clicked!');
    }
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>