插件的定義和使用 · vue筆記

[TOC] >[success] # 插件的定義和使用本章講解一下 **vue** 里 **插件的概念** ，之前學習過 **mixin 混入** ，通過 **mixin 混入可以對一些代碼邏輯進行一些封裝** ，實際上呢，我們如果使用 **plugin插件** 的這種功能，可以 **對代碼做更好的封裝**，那么一起學習一下在**vue** 里如果做 **插件** 。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>插件的定義和使用</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // plugin 插件, 也是把通用性的功能封裝起來 const myPlugin = { /** * 插件運行時走的邏輯，我們可以取到vue實例可以根據實例對象進行一些功能的擴展 * @param {object} app - vue實例 * @param {object} options - vue實例 */ install(app, options){ // 全局的provide name變量，用的地方只需要inject: ['name']，就可以取到 app.provide('name', 'Dell Lee') // 全局自定義指令 app.directive('focus', { mounted(el){ el.focus() } }) // 全局混入 app.mixin({ mounted(){ console.log('mixin') } }) // vue全局屬性擴展 app.config.globalProperties // 擴展$sayHello這個變量，如果加$證明是對vue底層做一個擴展 app.config.globalProperties.$sayHello = 'hello world' } } const app = Vue.createApp({ template: ` <my-title /> ` }) app.component('my-title', { inject: ['name'], mounted(){ console.log(this.$sayHello) }, template: `<div>{{ name }}<input v-focus /></div>` }) /** * 注冊插件 * @param {object} 參數1 - 插件對象 * @param {object} 參數2 - 給插件傳入的信息 */ app.use(myPlugin, { name: 'dell' }) const vm = app.mount('#root') </script> </html> ~~~ **vuex** 以及 **vue router** 都是通過 **plugin** 來進行擴展的。