mixin現在怎么使用(vue的mixin怎么使用)

mixin

mixin主要是針對vue的js邏輯復用,所以它一般都是js文件。

用法

先來看看它的用法

//name.jsexportdefault{data(){return{name:'mixin的name',obj:{name:'mixin',value:'mixin'}}},methods:{getName(){console.log('我是mixin,name:',this.name)console.log('obj:',this.obj)}},mounted(){console.log('我是mixin的mounted')this.getName()}}

它的用法和vue組件的用法是一樣的。 比如鉤子函數,methods的方法,data的數據等等。

然后在組件使用,通過mixins選項即可引入。

importnamefrom'./name.js'exportdefault{mixins:[name],data(){}}

那么就會有一個問題,那么如果組件內也定義了同樣的鉤子函數,同名方法,同名數據,該以誰的為準?是覆蓋還是合并?

通過例子來看看

importnamefrom'./name.js'exportdefault{mixins:[name],data(){name:'組件的name',obj:{name:'component'}},methods:{getName(){console.log('我是組件,name:',this.name)console.log('obj:',this.obj)}},mounted(){console.log('我是組件的mounted')this.getName()}}

打印的結果如下:

通過以上結果可以得到,

鉤子函數會合并起來,都會執行。先執行mixins的鉤子函數再執行組件的鉤子函數。

data的同名數據,要分情況討論

如果是基本類型,會用組件的同名數據覆蓋mixin的數據。

但是如果是對象,會遞歸對比key,如果是同名key則會覆蓋,如果不是同名的,則保留。

methods的方法也是一樣,會用組件的方法覆蓋mixin的同名方法。

除了上面這些選項,還有比如components(組件),和directives(指令)等也是一樣的邏輯,同名的會覆蓋,以組件的為優先。

“vue的mixin怎么使用”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注本站網站,小編將為大家輸出更多高質量的實用文章!