vue 全局组件

// 在 Vue 2 中注册全局组件

// 定义一个简单的按钮组件
Vue.component('global-button', {
  template: '<button class="btn">{{ text }}</button>',
  props: {
    text: {
      type: String,
      default: 'Click me'
    }
  }
});

// 创建根实例
new Vue({
  el: '#app'
});

/* 
解释说明:
1. 使用 `Vue.component` 方法可以注册一个全局组件。
2. 这个方法接收两个参数，第一个是组件的名字（如 'global-button'），第二个是一个选项对象，类似于创建局部组件时传入的选项。
3. 在这个例子中，我们定义了一个名为 `global-button` 的全局组件，它接受一个名为 `text` 的 prop，默认值为 'Click me'。
4. 一旦注册完成，这个组件可以在任何地方使用，而无需再次导入或定义。
*/

如果需要在 Vue 3 中注册全局组件，代码如下：

// 在 Vue 3 中注册全局组件

import { createApp } from 'vue';
import GlobalButton from './components/GlobalButton.vue';

const app = createApp({});

// 注册全局组件
app.component('global-button', GlobalButton);

app.mount('#app');

/*
解释说明:
1. 在 Vue 3 中，我们使用 `createApp` 函数创建应用实例。
2. 使用 `app.component` 方法注册全局组件。
3. `app.component` 方法的第一个参数是组件的名字，第二个参数是组件的定义。
4. 一旦注册完成，这个组件可以在任何地方使用，而无需再次导入或定义。
*/