目录
1. 概述
2. 插件
3. 综述
4. 个人公众号
1. 概述
老话说的好:起点低不要紧,只要坚持不断的去努力就能取得成功。
言归正传,今天我们来聊聊 VUE 中 插件的使用。
2. 插件
2.1 插件的声明
const myPlugin = {
install(app, options) {
// 增加一个变量
app.provide('name', 'lisi');
// 增加一个自定义指令
app.directive('my-focus', {
mounted(element) {
element.focus();
}
});
// 增加 mixin
app.mixin({
mounted() {
console.info("myMixin");
}
});
// 增加全局方法
app.config.globalProperties.$sayHello = 'say hello';
// 增加子组件
app.component('my-body', {
template: `
<h1>body</h1>
`
});
}
}
通常把通用的部分抽出来,单独写在插件中,在插件中可以增加变量、增加自定义指令、增加 mixin、增加子组件等。
2.2 组件与插件绑定
app.use(myPlugin, {name:'zhangsan', age : 35});
在组件与插件绑定时,可以传递参数,在插件中可以通过上面例子的 options 得到这个参数。
2.3 在组件中使用插件
const app = Vue.createApp({
template:`
<my-title />
<my-body />
`
});
app.component('my-title', {
inject:['name'],
mounted() {
console.info(this.$sayHello);
},
template: `
<div>{{name}}</div>
<div><input v-my-focus ></div>
`
});
// 使用插件
app.use(myPlugin, {name:'zhangsan', age : 35});
const vm = app.mount("#myDiv");
插件中声明的 变量、自定义指令、mixin、子组件等,都可以在组件中使用。
3. 综述
今天聊了一下 VUE 中 插件的使用,希望可以对大家的工作有所帮助,下一节我们继续讲 Vue 中的高级语法,敬请期待
关注追风人聊Java,这里干货满满,都是实战类技术文章,通俗易懂,轻松上手。
4. 个人公众号
微信搜索公众号:追风人聊Java