vue尚品汇商城项目-day07【vue插件-49.（了解）自定义插件】

红太狼 2024-03-24 13:41 76阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  49.（了解）自定义插件
 *  本人其他相关文章链接

### 49.（了解）自定义插件 ###

> 自定义插件好处：

1.  功能：用于增强Vue
2.  本质：包含install方法的一个对象，install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据

> 使用流程：

1.  新建xx.js文件自定义插件并提供暴露对象。
2.  在src/main.js中引入自定义插件并使用。

修改代码：

> 首先创建plugins文件夹，新建myPlugins.js文件

//Vue插件一定暴露一个对象
    let myPlugins = {};
    
    myPlugins.install = function(Vue,options){
        //Vue.prototype.$bus:任何组件都可以使用
        //Vue.directive自定义指令
        //Vue.component注册组件
        //Vue.filter过滤
        //全局指令
        Vue.directive(options.name,(element,params)=>{
            element.innerHTML = params.value.toUpperCase();
            console.log(params);
        });
    
    }
    //对外暴露组件对象
    export default myPlugins;

> src/main.js

//引入自定义插件
    import myPlugins from '@/plugins/myPlugins';
    Vue.use(myPlugins,{
        name:'upper'
    });

## 本人其他相关文章链接 ##

1.[vue尚品汇商城项目-day07【44.个人中心二级路由搭建+45.我的订单+46.优化登录跳转+47.独享守卫】][vue_-day07_44._45._46._47.]  
2.[vue尚品汇商城项目-day07【vue插件-48.（了解）图片懒加载插件】][vue_-day07_vue_-48.]  
3.[vue尚品汇商城项目-day07【vue插件-49.（了解）自定义插件】][vue_-day07_vue_-49.]  
4.[vue尚品汇商城项目-day07【vue插件-50.（了解）表单校验插件】][vue_-day07_vue_-50.]  
5.[vue尚品汇商城项目-day07【51.路由懒加载】][vue_-day07_51.]  
6.[vue尚品汇商城项目-day07【52.打包文件，处理map文件】][vue_-day07_52._map]  
7.[vue尚品汇商城项目-day07【53.nginx反向代理配置】][vue_-day07_53.nginx]  
8.[vue尚品汇商城项目-day07【vue插件-54.（了解）生成二维码插件】][vue_-day07_vue_-54.]  
9.[vue尚品汇商城项目-day07【55.编码测试与打包发布项目】][vue_-day07_55.]

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/7b0dfb5c2db947d09d121fc8320ec146.png
[vue_-day07_44._45._46._47.]: https://blog.csdn.net/a924382407/article/details/129921578
[vue_-day07_vue_-48.]: https://blog.csdn.net/a924382407/article/details/129921625
[vue_-day07_vue_-49.]: https://blog.csdn.net/a924382407/article/details/129921710
[vue_-day07_vue_-50.]: https://blog.csdn.net/a924382407/article/details/129921764
[vue_-day07_51.]: https://blog.csdn.net/a924382407/article/details/129921802
[vue_-day07_52._map]: https://blog.csdn.net/a924382407/article/details/129921841
[vue_-day07_53.nginx]: https://blog.csdn.net/a924382407/article/details/129921856
[vue_-day07_vue_-54.]: https://blog.csdn.net/a924382407/article/details/129946011
[vue_-day07_55.]: https://blog.csdn.net/a924382407/article/details/129946037