vue.mixin的使用方法:1、多個元件可以共用資料和方法,在使用mixin的元件中引入後,mixin中的方法和屬性也併入到該元件中,可以直接使用;2、鉤子函數會兩個都被調用,mixin中的鉤子首先執行。
【相關文章推薦:vue.js】
vue.mixin的使用方法:
vue中提供了一個混合機制--mixins,用來更有效率的實作元件內容的重複使用。最開始我一度認為這個和組件好像沒啥差別。 。後來發現錯了。下面我們來看看mixins和普通情況下引入元件有什麼區別?
組件在引用之後相當於在父組件內開闢了一塊單獨的空間,來根據父組件props過來的值進行相應的操作,單本質上兩者還是涇渭分明,相對獨立。
而mixins則是在引入元件之後,則將元件內部的內容如data等方法、method等屬性與父元件對應內容合併。相當於在引入後,父組件的各種屬性方法都被擴充了。
單純元件參考:
父親子元件>>> 父元件子元件
# 父元件子元件>>> new父元件
作用:多個元件可以共用資料和方法,使用mixin的元件中引入後,mixin中的方法和屬性也就併入到該元件中,可以直接使用。鉤子函數會兩個都被調用,mixin中的鉤子會先執行。
下面要介紹vue mixin的用法,具體介紹如下所示:
1、定義一個js 檔案(mixin.js)
export default { data() { return { name: 'mixin' } }, created() { console.log('mixin...', this.name); }, mounted() {}, methods: {} }
2、在vue文件中使用mixin
import mixin from '@/mixin'; // 引入mixin文件 export default { mixins: [mixin] }相關免費學習推薦:
JavaScript
以上是vue.mixin怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!