淺談vue自定義全局組件并通過全局方法 Vue.use() 使用該組件
簡介
Vue.use( plugin )：安裝 Vue.js 插件。如果插件是一個對象，必須提供 install 方法。如果插件是一個函數(shù)，它會被作為 install 方法。install 方法將被作為 Vue 的參數(shù)調(diào)用。
當(dāng) install 方法被同一個插件多次調(diào)用，插件將只會被安裝一次。
Vue.js 的插件應(yīng)當(dāng)有一個公開方法 install 。這個方法的第一個參數(shù)是 Vue 構(gòu)造器，第二個參數(shù)是一個可選的選項對象：
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或?qū)傩?
Vue.myGlobalMethod = function () {
// 邏輯...
}
// 2. 添加全局資源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
...
})
// 3. 注入組件
Vue.mixin({
created: function () {
// 邏輯...
}
...
})
// 4. 添加實例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 邏輯...
}
}
通過全局方法 Vue.use() 使用插件：
// 調(diào)用 `MyPlugin.install(Vue)` Vue.use(MyPlugin)
也可以傳入一個選項對象：
Vue.use(MyPlugin, { someOption: true })
Vue.use 會自動阻止多次注冊相同插件，屆時只會注冊一次該插件。
Vue.js 官方提供的一些插件 (例如 vue-router) 在檢測到 Vue 是可訪問的全局變量時會自動調(diào)用 Vue.use()。然而在例如 CommonJS 的模塊環(huán)境中，你應(yīng)該始終顯式地調(diào)用 Vue.use()：
// 用 Browserify 或 webpack 提供的 CommonJS 模塊環(huán)境時
var Vue = require('vue')
var VueRouter = require('vue-router')
// 不要忘了調(diào)用此方法
Vue.use(VueRouter)
實例：實現(xiàn)一個children組件
在main.js中使用該組件的方法：
import childModule from './components/children' Vue.use(childModule)
組件文件夾的目錄結(jié)構(gòu)如下：
|-components |-children |-index.js 導(dǎo)出組件，并且install |-children.vue （定義自己的組件模板）
children.vue代碼如下：
import childrencomponent from './children.vue'
const childrenMo = {
install:function(Vue){
Vue.component('childModule',childrencomponent)
}
}
export default childrenMo
這樣就實現(xiàn)了一個通過vue.use調(diào)用一個全局組件。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue嵌套路由與404重定向?qū)崿F(xiàn)方法分析
這篇文章主要介紹了vue嵌套路由與404重定向?qū)崿F(xiàn)方法,結(jié)合實例形式分析了vue.js嵌套路由與404重定向的概念、原理、實現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
vue使用vant中的checkbox實現(xiàn)全選功能
這篇文章主要為大家詳細(xì)介紹了vue使用vant中的checkbox實現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
Vue中使用iframe踩坑問題記錄 iframe+postMessage
這篇文章主要介紹了Vue中使用iframe踩坑問題記錄 iframe+postMessage，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue組件中的父子組件使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了Vue分頁組件的實例代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)簡易計算器的4種方法,文中通過代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue覺有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器的方法
最近在項目中使用 webpack 打包后升級，用戶反饋使用瀏覽器（chrome 45）訪問白屏。經(jīng)過排查發(fā)現(xiàn)：由于 chrome 45 無法兼容 ES6 語法導(dǎo)致的，接下來給大家介紹下Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器方法,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)移動端input上傳視頻、音頻，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
vue-draggable-resizable-gorkys是一更強(qiáng)大的拖拽組件,可以隨意拖拽,有點坐標(biāo),會議室拖拽布局排座是vue-draggable結(jié)合vue-draggable-resizable-gorkys進(jìn)行開發(fā)的,本文重點給大家介紹vue實現(xiàn)會議室拖拽布局排座,感興趣的朋友一起看看吧2023-11-11
本篇文章主要介紹了Vue 中批量下載文件并打包的示例代碼，用 ajax 將文件下載, 然后用 jszip 壓縮文件, 最后用 file-saver 生成文件，有興趣的可以了解一下2017-11-11