vue技巧【持续更新】

by Fakin

本文为自我记录在项目中使用到的一些比较实用的技巧

同级目录引入多个组件

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动态绑定继承的组件了