趁有机会,简单回顾下vue插件开发的过程。学习本身就是个不断重复滴过程嘛:
https://cn.vuejs.org/v2/guide/plugins.html
但是呢,如果看官网文档的话,有的小朋友可能就云里雾里了,不想再进行下去了,其实vue对于插件的定义就是,使用Vue.use方法,将引入的install方法里面相关Vue操作的方法逻辑运行了,实现在全局可以调用install方法里面的注册的组件,方法,属性等等
1. 您可以向Vue添加全局级功能。
2. 这是保持Vue组件清晰和小巧的好方法。 您还可以与其他开发人员打包并共享您的代码。
3. 总而言之一句话,插件只不过是一个公开安装方法的对象。
1. 首先,您应该导出插件对象,以便可以在项目的任何位置使用它。
2. 然后公开带有两个参数的install方法:Vue构造函数和选项对象。
3. 第二个参数 - 选项 - 是可选的,可以自定义您的插件。 install( Vue, [options] )
4. 在plugin目录下新建一个plugin.js文件
// plugin.js export default { // 参数一: Vue 构造函数 // 参数二: Vue.use(MyPlugin,{name: '我是王二小'});传递过来的配置参数 {name: '我是王二小'}... install (Vue, options) { } }5. 在main.js中引入
import MyPlugin from './plugin/plugin.js' Vue.use(MyPlugin,{name: '我是王二小'});安装方法包含以下一项或多项:
1. 添加一些全局方法或属性。
2. 添加一个或多个全局资产:指令/过滤器/转换等。
3. 通过Vue.mixin()方法添加一些组件选项 () 注:Mixins是一种灵活的方式来为Vue组件分配可重用的功能。 mixin对象可以包含任何组件选项。 当组件使用mixin时,mixin中的所有选项将“混合”到组件自己的选项中
4. 通过将它们附加到Vue.prototype来添加一些Vue实例方法 (不是很推荐)
5. 案例分析
// 引入自定义组件 import Component from '/src/components/Component.vue' export default { install (Vue, options) { // 1. 添加全局静态方法或者属性 Vue调用 Vue.yourMethod = (value) => value //2. 全局注册组件 Vue.component('component', Component) //3. 添加 `Vue.mixin()` 向全局组件内部注入方法 Vue.mixin({ // 向组件内部混入生命周期内部逻辑(同名钩子函数将混合为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用) created() { console.log('Hello from created hook!') } }) // Vue.prototype 原型添加属性和方法 内部this可直接调用 Vue.property.$myProperty = 'This is a Vue instance property.' } }