vue專案開發中使用mixins
阿新 • • 發佈:2018-11-10
mixins的使用
個人理解mixins就是定義一部分公共的方法或者計算屬性,然後混入到各個元件中使用,方便管理與統一修改
1.在assets資料夾下建立一個js檔案
// 建立一個需要混入的物件
export const mixinTest1 = {
created() {
this.hello();
},
methods: {
hello() {
console.log('mixinTest1');
}
}
};
- 在元件中使用剛剛建立的混入
import {mixinTest1} from './../assets/js/mixin';
export default {
mixins:[mixinTest1],
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
這樣就可以直接呼叫到混入物件中的hello方法
- 最後,全域性混入!
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
如果還是不是很瞭解,請移步官網https://cn.vuejs.org/v2/guide/mixins.html