vue技巧【持续更新】
本文为自我记录在项目中使用到的一些比较实用的技巧
同级目录引入多个组件
const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
const name = path.basename(key, '.vue')
modules[name] = files(key).default || files(key)
})
export default modules
mixins混入公共方法
// mixins.js
export const mixin1 = {
created() {
this.hello();
},
methods: {
hello() {
console.log('fakin');
}
}
}
// demo.vue
import {mixin1} from './js/mixins;
export default {
mixins:[mixin1],
data () {
return {
msg: 'hello fakin
}
}
}
// demo2.vue
// do something
extends继承组件
// main.vue
import TopoBase from './TopoBase'
export default {
extends: TopoBase,
}
// TopoBase.vue
import ViewText from './control/ViewText';
import ViewImage from './control/ViewImage';
export default {
name: 'TopoBase',
components: {
ViewText,
ViewImage
}
}
这样就可以在main利用vue的component动态绑定继承的组件了