辨析组件 指令 插件 写法

组件

Vue.componet('name',cmp)

通过插件批量注册

// 1. 准备放置组件数据
const cps = [CheckBox, Skeleton, Slider, More, Bread, BreadItem, City, Sku, Numbox, Button]
​
export default {
  /**
   * vue2：Vue构造函数 作用：注册全局组件、指令、过滤器、方法、混入
   * vue3：app 根实例 作用：注册全局组件、指令、混入
   * @param {*} app
   */
  install (app) {
    // console.log('根实例:', app)
    // app.component('Skeleton', Skeleton)
    cps.forEach(cp => {
      app.component(cp.name, cp)
    })
  }
}

指令

Vue.directive('name',{
​
    inserted(el) {
​
    }
​
})

批量注册指令

导出

const focus = {
​
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
}
​
export { imgerror, focus }

// 注册全局指令（批量注册多个）
// Object.keys()=>遍历一个对象，把对象上所有的key属性名都放到数组中返回
​
Object.keys(directs).forEach(name => {
  Vue.directive(name, directs[name])
})

插件

vue3.0注册 全局组件 全局指令 混入

vue2.0注册 全局组件 全局指令 混入 过滤器 方法

对象

{
    install(Vue) { //3.0为app实例
​
    }
}

使用

main.js use