Question: When learning a custom directive, there is a code in directive/index.js that looks like this:

import copy from "./copy"; export default { install(Vue) { Vue.directive('copy', copy); }};Copy the code

See: VUE custom instruction encapsulation (deep impression)

A few days later, I saw a reference method for the post component, which also had a code in directive/index.js

import Modal from './modal.vue'; export default { install(Vue) { Vue.component('Modal', Modal); }};Copy the code

Global registration

.import Directives from '@/directives';
 / / the keyVue.use(Directives); .Copy the code

The first argument to install is the Vue constructor, and the second argument is an optional object:

MyPlugin.install = function (Vue, options) { // 1. Property vue.myGlobalMethod = function () {// Logic... {bind (el, binding, vnode, oldVnode) {// bind (el, binding, vnode, oldVnode) {// bind (el, binding, vnode, oldVnode) {// bind (el, binding, vnode, oldVnode) {// }... Mixin ({created: function () {// logic... }... $myMethod = function (methodOptions) {$myMethod = function (methodOptions) {$myMethod = function (methodOptions); }}Copy the code

Summary: Once the install method is wrapped, you need to register it globally or individually with vue.use()

Application scenario: Custom directives or encapsulated components that do not want to be introduced every time can be globally exposed and referenced directly by individual components