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

简介: vue尚品汇商城项目-day07【vue插件-49.(了解)自定义插件】

1.jpeg

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.独享守卫】
2.vue尚品汇商城项目-day07【vue插件-48.(了解)图片懒加载插件】
3.vue尚品汇商城项目-day07【vue插件-49.(了解)自定义插件】
4.vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
5.vue尚品汇商城项目-day07【51.路由懒加载】
6.vue尚品汇商城项目-day07【52.打包文件,处理map文件】
7.vue尚品汇商城项目-day07【53.nginx反向代理配置】
8.vue尚品汇商城项目-day07【vue插件-54.(了解)生成二维码插件】
9.vue尚品汇商城项目-day07【55.编码测试与打包发布项目】

目录
相关文章
|
1天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
9 2
|
1天前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
6 1
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
5 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
3天前
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
3天前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
14 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
2天前
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
16 1
|
3天前
|
JavaScript
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
10 2
|
2天前
|
JavaScript 索引
vue尚品汇商城项目-day04【25.面包屑处理关键字】
vue尚品汇商城项目-day04【25.面包屑处理关键字】
14 1
|
2天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
10 1
|
3天前
|
JavaScript 索引
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
10 1