Vue 2：Vue.component

本文用于 Vue 2 项目。Vue 3 对应 app.component()，见 createApp。

注册与读取

import Vue from 'vue';
import MyButton from './MyButton.vue';

Vue.component('my-button', MyButton);
const ButtonConstructor = Vue.component('my-button');

也可传入组件选项对象：

Vue.component('my-button', {
  template: '<button @click="$emit(\'click\')">提交</button>'
});

注册后，新建组件的模板可使用 <my-button />。只供某个父组件使用时，优先局部注册：components: { MyButton }。

与 Vue.extend 的关系

Vue.extend(options) 创建组件子类构造器；Vue.component(name, definition) 将组件与名称关联。传入普通选项对象时，Vue.component 内部会转换为构造器；也可直接传入已有构造器。

const Message = Vue.extend({ props: ['text'], template: '<p>{{ text }}</p>' });
Vue.component('v-message', Message);

Message / Toast 的程序化创建、挂载与销毁流程见 Vue.extend。