Vue中组件(Component)和插件(Plugin)的区别及说明

// 全局注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

// 局部注册
const ComponentA = { /* ... */ }
new Vue({
  components: { 'component-a': ComponentA }
})

const MyPlugin = {
  install(Vue, options) {
    // 1. 添加全局方法/属性
    Vue.myGlobalMethod = function() { /* ... */ }
    
    // 2. 添加全局指令
    Vue.directive('my-directive', { /* ... */ })
    
    // 3. 注入组件选项
    Vue.mixin({ created() { /* ... */ } })
    
    // 4. 添加实例方法
    Vue.prototype.$myMethod = function() { /* ... */ }
  }
}

// 使用插件
Vue.use(MyPlugin, { someOption: true })