Vue中的混入的使用(vue mixins)
更新時間：2018年06月01日 11:29:14 作者：Brighten_Sun
這篇文章主要介紹了Vue中的混入的使用(vue mixins)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
使用場景：
例如我們在Vue單頁面開發(fā)的時候當多個組件中都需要下拉刷新，或者使用的都是一個方法的時候，我們就可以使用vue mixins進行封裝調用，以及繼承，具體看代碼。
選項合并
var mixin = {
data: function () {
return {
message: 'hello'
}
},
created:function(){
console.log('我是mixins中的created')
},
methods:{
show:function(num){
console.log(num) //mixins種的函數(shù)可以接收組件種的傳參。
},
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
data: function () {
return {
title: 'def',
message: 'goodbye'
}
},
created: function () {
console.log('我是Vue中的created')
console.log(this.$data)
this.show(50); //可通過函數(shù)傳參,把組件中需要的參數(shù)傳給mixins進行使用。
},
methods:{
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
注意以下三點：
1、當組件和混入對象含有同名選項時，這些選項將以恰當?shù)姆绞交旌?。比如，?shù)據(jù)對象在內部會進行淺合并 (一層屬性深度)，在和組件的數(shù)據(jù)發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先。
2、同名鉤子函數(shù)將混合為一個數(shù)組，因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子之前調用。
3、值為對象的選項，例如 methods, components 和 directives，將被混合為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。
全局混入
也可以全局注冊混入對象。注意使用！ 一旦使用全局混入對象，將會影響到 所有 之后創(chuàng)建的 Vue 實例。使用恰當時，可以為自定義對象注入處理邏輯。
//為自定義的選項 'myOption' 注入一個處理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
今天整了一個項目,試了下打包,發(fā)下打包后只生成了一個css文件,和一個js文件,這樣肯定是不行的,因為這樣這個文件的包大小很大,第一次訪問會導致白屏問題,所以本文給大家介紹了vite打包只生成了一個css和js文件問題的解決方法,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了vue3 axios安裝及使用示例代碼,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-04-04
Vue對Element中el-tab-pane添加@click事件無效問題解決
這篇文章主要給大家介紹了關于Vue對Element中el-tab-pane添加@click事件無效問題的解決辦法,文中通過圖文以及代碼示例介紹的非常詳細,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細介紹了Vue3導航欄組件封裝的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue-quill-editor富文本編輯器上傳視頻功能詳解
需求需要實現(xiàn)富文本的功能,同時富文本中還可以上傳視頻和圖片,選來選去最后決定了用這個富文本編輯器,下面這篇文章主要給大家介紹了關于vue-quill-editor富文本編輯器上傳視頻功能的相關資料,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue3.0實現(xiàn)插件封裝的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
在vue中實現(xiàn)antd的動態(tài)主題的代碼示例
在需求開發(fā)階段,鑒于項目采用了antd作為基礎組件庫,確保組件外觀與antd一致變得尤為重要,這包括顏色、字體大小及尺寸等樣式的統(tǒng)一,然而,截至當前antd-vue尚未實現(xiàn)這一便捷的CSS變量特性,但理解其背后的實現(xiàn)機制后,我們可以自行構建這一功能,需要的朋友可以參考下2024-07-07
Vue項目配置、切換主題顏色詳細教程(mixin+scss方式,簡單高效)
這篇文章主要給大家介紹了關于Vue項目配置、切換主題顏色(mixin+scss方式)的相關資料,根據(jù)預設的配色方案,在前端實現(xiàn)動態(tài)切換系統(tǒng)主題顏色,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-11-11
vue運行項目時network顯示unavailable的問題及解決
這篇文章主要介紹了vue運行項目時network顯示unavailable的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
在Vue3項目中需要頻繁使用某一個方法,配置到全局感覺會方便很多,這篇文章主要給大家介紹了關于Vue3使用全局函數(shù)或變量的2種常用方式,需要的朋友可以參考下2023-09-09