插件擴充 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=)