插件扩展 plugin 就很强
前几篇我们介绍了 mixin 混入的的方式能实现对代码的复用, 而本篇将要介绍的 plugin 将会更加适合这种通用性功能的代码的复用和扩展.
最常用的场景, 比如轮播图就非常实用 plugin 来实现封装, 首先来直观演示一下插件的使用过程.
plugin 初体验
这里我们给 app 扩展一个插件, 功能是给 app 扩展一个 name 属性, 值是 youge, 然后将这个数据传给子组件 Son 去使用, 当然这里跨层传递咱直接用 provide - inject 的方式即可.
<!DOCTYPE html>
<html lang="en">
<head>
<title>插件 plugin 初体验</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// 1. 定义个插件, 给 app 扩展一个 name 数据, 并在 app 中使用
const myPlugin = {
install(app, options) {
// console.log(app, options)
// app 表示这个 vue 实例 app
// options 表示传入的操作或者数据
app.provide('name', 'youge')
}
}
const app = Vue.createApp({
template: `
<Son />
`
})
// 3. 通过 provide-inject 的方式来跨层传递/接收数据
app.component('Son', {
inject: ['name'],
template: `<div>{{name}}</div>`
})
// 2. 注册定义的插件 myPlugin
app.use(myPlugin)
const vm = app.mount('#root')
</script>
</body>
</html> 即 plugin 的基本使用流程就是:
- 在 app 外定义个插件对象, 里面定义一个 install 方法, 传两个参数即 app 和 options
- 在使用的时候, 这个 app 即是 vue 的实例, options 则是一些输入操作等, 功能逻辑都封装在 install 中
- 在最外层对 plugin 进行一个注册使用, 即 app.user(插件名称)
更多的扩展
因其 plugin 的 install 能获取到 app 和 options 那理论上就可以做 n 多个扩展啦, 比如什么自定义指令呀, mixin呀, 甚至顶层属性扩展都是 ok 的.
<!DOCTYPE html>
<html lang="en">
<head>
<title>plugin 能随便你扩展啦</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
// 能支持更多你想要的扩展骚操作
const myPlugin = {
install(app, options) {
// 1. 扩展数据
app.provide('name', 'youge')
// 2. 扩展自定义指令
app.directive('focus', {
mounted (el) {
el.focus()
}
})
// 3. 扩展 mixin
app.mixin({
mounted () {
console.log('my mixini')
}
})
// 4. 扩展 vue 底层的全局属性
// 比如咱之前会将 echarts 整个应用挂载到 appd 的原型链上, 全局使用
app.config.globalProperties.$echarts = 'echarts'
}
}
const app = Vue.createApp({
template: `
<Son />
`
})
app.component('Son', {
inject: ['name'],
mounted () {
console.log('这里为演示将其写成字符串了哈: ', this.$echarts)
},
template: `
<div>
<div>{{name}}</div>
<input v-focus />
</div>`
})
// 记得一定要 注册定义的插件 myPlugin
app.use(myPlugin)
const vm = app.mount('#root')
</script>
</body>
</html> 这个就是 plugin 的强大之处啦, 不过目前呢, 我好像除了轮播图, 似乎也没有用到哈哈哈, 但是它很强.
总结
- 在 app 外定义个插件对象, 里面定义一个 install 方法, 传两个参数即 app 和 options
- 在使用的时候, 这个 app 即是 vue 的实例, options 则是一些输入操作等, 功能逻辑都封装在 install 中
- 在最外层对 plugin 进行一个注册使用, 即 app.user(插件名称)
- 理论上能扩展 N 个东西, 如 传数据, mixin, 自定义指令, 底层属性等等, 就很强
![【maven】No plugin found for prefix ‘install‘ in the current project1.场景1[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)