Vue中混入mixin的用法介紹
什么是混入?
混入通過注入配置項(xiàng)到vue實(shí)例用來提升復(fù)用性
基礎(chǔ)使用
const myMixin = { created: function () { this.hello(); }, methods: { hello: function () { console.log('hello from mixin'); }, }, }; var vm = new Vue({ el: '#app', mixins: [myMixin], });
選項(xiàng)合并
選項(xiàng)合并發(fā)生在下面兩種情況
- mixins接收的是一個(gè)數(shù)組,mixin中的屬性沖突時(shí)會發(fā)生合并
- mixin屬性和組件原有屬性沖突時(shí)
const myMixin = { created: function () { this.hello(); }, methods: { hello: function () { console.log('hello from mixin'); }, }, }; var vm = new Vue({ el: '#app', mixins: [myMixin], created: function () { this.hello(); }, methods: { hello: function () { console.log('hello from vue instance'); }, }, });
上述兩種的選項(xiàng)合并規(guī)則是相同的:
- 周期鉤子沖突的時(shí)候,會合并成數(shù)組都保留,執(zhí)行順序是先執(zhí)行minxi的鉤子,再執(zhí)行組件上的鉤子
- methods、computed這類值為對象的選項(xiàng)在沖突的時(shí)候以組件屬性為準(zhǔn)
自定義合并規(guī)則
除了使用上述默認(rèn)的合并規(guī)則,還可以通過Vue.config.optionMergeStrategies自定義合并規(guī)則。
Vue.config.optionMergeStrategies.myMixin=(toVal, fromVal){ //返回合并的值 };
通常對于值為對象的屬性我們可以借用已有的合并規(guī)則
//借用methods的規(guī)則 Vue.config.optionMergeStrategies.myMixin=Vue.config.optionMergeStrategies.methods;
全局混入
混入也可以全局注冊,使用時(shí)候要格外小心,它會影響到每一個(gè)組件/實(shí)例
Vue.mixin({ created: function () { console.log('mixin created'); }, }); var vm1 = new Vue(...); var vm2 = new Vue(...);
總結(jié)
- mixin混入通過注入配置項(xiàng)到vue實(shí)例提升復(fù)用性
- 屬性沖突時(shí)以組件內(nèi)的屬性為準(zhǔn),聲明周期的鉤子會保留多個(gè)
到此這篇關(guān)于Vue中混入mixin的用法介紹的文章就介紹到這了,更多相關(guān)Vue mixin內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 如何添加全局函數(shù)或全局變量以及單頁面的title設(shè)置總結(jié)
本篇文章主要介紹了vue 如何添加全局函數(shù)或全局變量以及單頁面的title設(shè)置總結(jié),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-06-06ElementUI中兩個(gè)Select選擇聯(lián)動效果實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于ElementUI中兩個(gè)Select選擇聯(lián)動效果實(shí)現(xiàn)的相關(guān)資料,在前端項(xiàng)目開發(fā)中,經(jīng)常會遇到省市縣三級聯(lián)動的下拉列表框組的問題,需要的朋友可以參考下2023-08-08vue.js 嵌套循環(huán)、if判斷、動態(tài)刪除的實(shí)例
下面小編就為大家分享一篇vue.js 嵌套循環(huán)、if判斷、動態(tài)刪除的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域
這篇文章主要介紹了vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域的相關(guān)資料,及代理跨域的概念原理,需要的朋友可以參考下2018-04-04基于vue開發(fā)的在線付費(fèi)課程應(yīng)用過程
這篇文章主要介紹了基于vue開發(fā)的在線付費(fèi)課程應(yīng)用過程,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01前端vue-cropperjs實(shí)現(xiàn)圖片裁剪方案
這篇文章主要為大家介紹了前端vue-cropperjs實(shí)現(xiàn)圖片裁剪方案,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Vue.js中用webpack合并打包多個(gè)組件并實(shí)現(xiàn)按需加載
對于現(xiàn)在前端插件的頻繁更新,我也是無力吐槽,但是既然入了前端的坑就得認(rèn)嘛,所以多多少少要對組件化有點(diǎn)了解,下面這篇文章主要給大家介紹了在Vue.js中用webpack合并打包多個(gè)組件并實(shí)現(xiàn)按需加載的相關(guān)資料,需要的朋友可以參考下。2017-02-02