Skip to content

Fakin's Blog

  • 首页
  • 前端
    • Vue
    • React
    • JavaScript
    • CSS
  • 技术
    • 织梦教程
  • 模板
    • 织梦模板
    • wordpress主题
  • 资源
  • 日记
  • 友链

vue技巧【持续更新】

十一月 21, 2019 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动态绑定继承的组件了

Post navigation

上一篇:

uni-app中picker组件“确定”和“取消”文字的修改

下一篇:

JavaScript实用工具库【持续更新】

最近文章

  • 仿element-ui中Layout 布局-xcLayout
  • node-sass-error 解决方法
  • 自我ESLint配置【仅供参考】
  • JavaScript实用工具库【持续更新】
  • vue技巧【持续更新】
  • uni-app中picker组件“确定”和“取消”文字的修改
  • uni-app国际化
  • vue-cli3.0配置scss全局变量

最近评论

  • 心灵博客发表在《JavaScript实用工具库【持续更新】》
  • Teacher Du发表在《友情链接》
  • 火辣辣发表在《友情链接》
  • 心灵博客发表在《uni-app跨域设置》
  • 腾讯云代金券发表在《element ui+七牛云上传》

更新日历

2021年一月
一 二 三 四 五 六 日
« 4月    
 123
45678910
11121314151617
18192021222324
25262728293031
© 2021 Fakin's Blog         | WordPress Theme by SuperbThemes | 蜀ICP备16017838号-2