文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

手把手教你在 Vue3 中自定义插件

2024-12-01 17:59

关注

最近在录 TienChin 项目,项目涉及到了 Vue 中插件的定义,因此整了这么一篇文章,手把手教大家在 Vue3 中定义插件,这个技能掌握了,就可以看懂 TienChin 前端代码了。

1. Vue 插件

在 Vue 中,一些简单的功能,我们可以直接定义为全局方法,然后挂到 Vue 上就能使用了,例如在 vhr 中,我们将网络请求方法进行封装,然后挂到了 Vue.prototype 上就可以了,类似下面这样:

import {postRequest} from "./utils/api";

Vue.prototype.postRequest = postRequest;

然后在使用的地方,就可以通过 this.postRequest 去使用了。

小伙伴们需要注意,这个在 Vue3 中有所变化,prototype 变为了 config.globalProperties,也就是在 Vue3 中再想要挂载全局方法,应该是 const app = createApp(App);app.config.globalProperties.useDict = useDict 这种形式了(具体我将在 TienChin 项目中和大家细聊)。

这也算是一种插件定义方式,但是这种一般适用于一些工具方法,无法定义一些比较复杂的插件,复杂的插件还是得通过 Vue 中提供的插件定义方式来定义。

2. 自定义插件

2.1 基本用法

首先我们新建一个目录 plugins 专门用来放我们的插件,然后在这个目录中新建一个 index.js 文件用来开发插件,内容如下:

export default {
install: (app, options) => {
console.log("我的第一个插件")
}
};

install 中的方法将会被自动执行。

接下来我们就可以在 main.js 中引入我们这个插件了:

const app = createApp(App);

import plugin from './plugins'

app.use(plugin);

app.use 就表示引入插件,引入插件之后,插件中的 install 方法就会被自动执行。

app.use 方法接收两个参数,第一个参数就是我们导入的插件 js 对象,第二个参数是可选的,大家看到插件定义时候的 install 方法有两个参数,第一个参数是 Vue 实例,这是自动传入的,第二个参数 options 则是我们在 app.use 中,通过第二个参数传入进来的。当然上面这个例子中松哥没有传递第二个参数。

好了,如此配置之后,接下来启动项目,控制台就可以看到有日志打出了。

这样的插件未免过于简单,接下来我们就给这个插件加点料。

2.2 加入组件

首先我们定义一个新的组件,如下:

<template>
<div>
<h1><a href="http://www.javaboy.org">javaboy</a>h1>
</div>
</template>

<script>
export default {
name: "MyBanner"
}
</script>

然后我们现在就可以在插件中将这个组件注册为一个全局组件了,如下:

import MyBanner from "@/plugins/components/MyBanner";

export default {
install: (app, options) => {
console.log("我的第一个插件")
app.component('my-banner', MyBanner);
}
};

首先在插件中导入这个组件,然后通过 app 进行组件注册,注册完成后,我们就可以在项目任意位置使用 my-banner 组件了,如下:

<template>
<div>
<my-banner></my-banner>
</div>
</template>

最终显示效果如下:

2.3 加入指令

我们甚至还可以在插件中注册一个指令,如下:

import MyBanner from "@/plugins/components/MyBanner";

export default {
install: (app, options) => {
console.log("我的第一个插件")
app.component('my-banner', MyBanner);
app.directive("font-size", (el, binding, vnode) => {
var size = 16;
switch (binding.arg) {
case "small":
size = 16;
break;
case "large":
size = 32;
break;
default:
size = 48;
break;
}
el.style.fontSize = size + "px";
});
}
};

现在,我们就可以在项目中随时随地去使用这个指令了,例如在我们刚刚自定义的 my-banner 中使用这个指令:

<template>
<div>
<h1><a href="http://www.javaboy.org" v-font-size:small>javaboy</a>h1>
</div>
</template>

<script>
export default {
name: "MyBanner"
}
</script>

我们甚至可以通过 options 将指令中字体的大小动态的传进来,如下:

import MyBanner from "@/plugins/components/MyBanner";

export default {
install: (app, options) => {
console.log("我的第一个插件")
app.component('my-banner', MyBanner);
app.directive("font-size", (el, binding, vnode) => {
var size = 16;
switch (binding.arg) {
case "small":
size = options.small;
break;
case "large":
size = options.large;
break;
default:
size = options.defaut;
break;
}
el.style.fontSize = size + "px";
});
}
};

options 是插件注册时候传入的一个 JSON 参数,small、large 以及 default 分别对应的字体多大,要看插件注册时传入的值:

const app = createApp(App);

import plugin from './plugins'

app.use(plugin, {small: 16, large: 32, default: 48});

第二个参数,大家看,就是 options 参数的值。

现在大家想想我们平时用 ElementUI 的时候,Vue.use 方法,传入 ElementUI,再传入一些其他参数,看了上面这个例子,ElementUI 引入到底是怎么个引入法现在大家就明白了吧。

2.4 provide & inject

在插件中,也可以通过 provide 来提供一个方法,在需要使用该方法的地方,通过 inject 注入方法,然后就可以使用了,如下:

import MyBanner from "@/plugins/components/MyBanner";

export default {
install: (app, options) => {
console.log("我的第一个插件")
app.component('my-banner', MyBanner);
app.directive("font-size", (el, binding, vnode) => {
var size = 16;
switch (binding.arg) {
case "small":
size = options.small;
break;
case "large":
size = options.large;
break;
default:
size = options.defaut;
break;
}
el.style.fontSize = size + "px";
});
const clickMe = () => {
console.log("==========clickMe=========")
}
app.provide('clickMe', clickMe);
}
};

在需要使用的地方,通过 inject 注入方法后就可以使用了,如下:

<template>
<div>
<h1><a href="http://www.javaboy.org" v-font-size:small>javaboy</a>h1>
</div>
</template>

<script>

import {inject} from "vue";

export default {
name: "MyBanner",
mounted() {
const clickMe = inject('clickMe');
clickMe();
}
}
</script>

3. 小结

整体上来说,通过这种方式来自定义插件,能够实现的内容比较丰富。如果只是想挂一个全局方法来用,那么其实是没有必要定义插件的。如果只是想挂载一个全局方法,在 Vue2 中可以按照如下方式使用:

Vue.prototype.postRequest = postRequest;

在 Vue3 中则可以通过如下方式:

app.config.globalProperties.useDict = useDict
来源:江南一点雨内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯