vue中的mixins混入使用方法
mixins
混合 (mixins) 是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式。
混合對象可以包含任意組件選項。
當組件使用混合對象時，所有混合對象的選項將被混入該組件本身的選項。
mixins理解
組件在引用之后相當于在父組件內(nèi)開辟了一塊單獨的空間，來根據(jù)父組件props過來的值進行相應的操作，單本質(zhì)上兩者還是涇渭分明，相對獨立。
而mixins則是在引入組件之后，則是將組件內(nèi)部的內(nèi)容如data等方法、method等屬性與父組件相應內(nèi)容進行合并。相當于在引入后，父組件的各種屬性方法都被擴充了。
單純組件引用：
- 父組件 + 子組件 >>> 父組件 + 子組件
mixins：
- 父組件 + 子組件 >>> new父組件有點像注冊了一個vue的公共方法，可以綁定在多個組件或者多個Vue對象實例中使用。另一點，類似于在原型對象中注冊方法，實例對象即組件或者Vue實例對象中，仍然可以定義相同函數(shù)名的方法進行覆蓋，有點像子類和父類的感覺。
作用：
用簡單的話去概括就是一種分發(fā)vue組件中的功能可以復用一個技術(shù)，使用這個技術(shù)我們可以把需要復用的內(nèi)容封裝成一個vue組件，方便下次使用方便
使用方法
首先在src中去創(chuàng)建一個自己的文件夾，然后把要封裝的內(nèi)容放入到這個文件夾，方便后續(xù)的調(diào)用
let mymixin={
methods:{
handleBtn(){
alert('封裝的內(nèi)容已經(jīng)觸發(fā)！')
}
}
}
export default mymixin
全局混入
全局混入就是我們可以把封裝好的這個組件在main.js中全局注冊，方便在任何地方使用
import myMixins from "./mixins/index.js" // 全局混入 Vue.mixin(myMixins)
局部混入
也就是引用的復用內(nèi)容只能在當前組件中生效
<template>
<button @click="handleBtn">點我觸發(fā)</button>
</template>
<script>
import myMixins from '@/mixin.js'
export default {
mixins:[myMixins]
}
</script>
<style>
</style>
這樣就實現(xiàn)了一個簡單的混入，減少代碼的復用性，大大加強了開發(fā)效率，你就可以安心的考慮業(yè)務，而不是不停的敲代碼
mixins的使用
方法的復用
html
<div id="app">
<child></child>
<kid></kid>
</div>
js
Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
methods:{
foo(){
console.log('Child foo()'+this.msg++)
}
}
})
Vue.component('kid',{
template:`<h1 @click="foo">kid component</h1>`,
methods:{
foo(){
console.log('Kid foo()'+this.msg++)
}
}
})
在借助mixins之前，在兩個不同的組件的組件中調(diào)用foo方法，需要重復定義，倘若方法比較復雜，代碼將更加冗余。若借助mixins，則變得十分簡單：
let mixin={
data(){
return{
msg:1
}
},
methods:{
foo(){
console.log('hello from mixin!----'+this.msg++)
}
}
}
var child=Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
mixins:[mixin]
})
Vue.component('kid',{
template:`<h1 @click="foo">kid component</h1>`,
mixins:[mixin]
})
雖然此處，兩個組件用可以通過this.msg引用mixins中定義的msg，但是，小編嘗試過，兩個組件引用的并不是同一個msg，而是各自創(chuàng)建了一個新的msg。如果在組件中定義相同的data，則此處會引用組件中的msg，而非mixins中的。
方法的覆蓋
如果在引用mixins的同時，在組件中重復定義相同的方法，則mixins中的方法會被覆蓋。
var child=Vue.component('child',{
template:`<h1 @click="foo">child component</h1>`,
mixins:[mixin],
methods:{
foo(){
console.log('Child foo()'+this.msg++)
}
}
})
此時，若單擊h1標簽，則在控制臺中打印"Child foo() 1" 3、合并生命周期此時，若單擊h1標簽，則在控制臺中打印"Child foo() 1"
合并生命周期
let mixin={
mounted(){
console.log('mixin say hi')//先輸出
},
data(){
return{
msg:1
}
},
methods:{
foo(){
console.log('mixin foo()'+this.msg++)
}
}
}
let vm=new Vue({
el:"#app",
data:{
msg: 2
},
mounted: function(){
console.log('app say hi')//后輸出
},
methods:{
foo(){
console.log('Parent foo()'+this.msg)
}
}
})
通過上面的介紹，現(xiàn)在對mixins有了比較深入的了解，在設計復雜組件時是很有必要的。
到此這篇關于vue中的mixins混入使用方法的文章就介紹到這了,更多相關vue中的mixins內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue3使用vis繪制甘特圖制作timeline可拖動時間軸及時間軸中文化(推薦)
這篇文章主要介紹了vue3使用vis繪制甘特圖制作timeline可拖動時間軸，時間軸中文化,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
在本篇文章里小編給大家整理了一篇關于vue中對虛擬dom的理解知識點總結(jié)內(nèi)容，有興趣的朋友們可以學習參考下。2021-06-06
vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色
這篇文章主要介紹了vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
使用Vant完成DatetimePicker 日期的選擇器操作
這篇文章主要介紹了使用Vant完成DatetimePicker 日期的選擇器操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
最近學習threejs有些時間了,就想著著手做些東西,下面這篇文章主要給大家介紹了關于vue3中如何用threejs畫一些簡單的幾何體的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細介紹了vue開發(fā)簡單上傳圖片功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要向大家分享的是Vue?中插槽的使用總結(jié)，包括內(nèi)容有默認插槽、具名插槽、作用域插槽等內(nèi)容，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了Vue3中如何使用fullcalendar日歷插件,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
Nvue是一個基于weex改進的原生渲染引擎,它在某些方面要比vue更高性能,在app上使用更加流暢,這篇文章主要介紹了nvue頁面用法uniapp,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue中如何引入html靜態(tài)頁面，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01