0
点赞
收藏
分享

微信扫一扫

VUE3 之 插件的使用 - 这个系列的教程通俗易懂,适合自学


目录

​​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


举报

相关推荐

0 条评论