Vue的插件机制及其原理

浪里小韭菜

于 2022-05-12 14:37:00 发布

阅读量41

点赞数

文章标签： vue.js javascript ecmascript 前端前端框架

本文链接：https://blog.csdn.net/qq_38828542/article/details/134052214

版权

本文详细介绍了Vue.js插件的使用和开发，包括如何通过插件添加全局方法、属性、资源以及组件选项。Vue.use()是使用插件的关键，而插件的核心在于其install方法，该方法接收Vue构造器和可选的选项对象作为参数，实现对Vue实例的扩展。通过插件，可以轻松地将自定义功能整合到Vue应用中。

摘要由CSDN通过智能技术生成

一、通常用来为Vue添加全局功能

添加全局方法或者属性。如vue-custom-element
添加全局资源：指令、过滤器、过度等。如vue-touch
通过全局混入来添加一些组件选项。如vue-router
添加Vue实例方法，通过把他们添加到Vue.prototype上实现
一个库，提供自己的API。如vue-router

二、使用插件方法

通过全局方法Vue.use()使用方法，它需要你调用new Vue()时启动应用之前完成。

三、插件原理

本质上插件就是一个对象，在对象里面调用 install 方法

Vue.js的插件应该暴露一个 install 方法，这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象

MyPlugin.install = function(Vue, options) {
  // 1 、添加全局方法或属性
  Vue.myGLobalMethod = function(){ };

  // 2、添加全局资源
  Vue.directive('my-directive', {
    bind(el, binding, vnode, oldVnode) {  }
  });

  // 3、注入组件选项
  Vue.mixin({
    created: function(){  }
  });

  // 4、添加实例方法
  Vue.prototype.$myMethod = function(methodOptions) {  }
}