码迷,mamicode.com
首页 > 其他好文 > 详细

vue--mixins

时间:2018-05-31 00:43:02      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:mon   name   must   code   rom   关系   ror   创建   https   

vue官方文档

学习vue其实就是熟练后根据文档开发。

// 创建一个需要混入的对象 
export const mixinTest1 = {
    created() {
        this.start();
    },
    methods: {
        start() {
            console.log(‘mixins‘);
        },
        handlePlaylist() {
               throw new Error(‘component must implement handlePlaylist method‘)
        }
    }
};

 

import {mixinTest1} from ‘./common/js/mixin‘;
export default {
    mixins:[mixinTest1],
    name: ‘hello‘,
    data () {
        return {
            msg: ‘Welcome to Your Vue.js App‘
        }
    }
}

以上是一个例子。

如果要说mixins类比什么,我觉得像jquery里的$.extends()方法,就是先对组件对象的空对象先let obj = $.extends({},mixinTest1)后$.extends(obj,组件对象)。

有是像这个,其实就是mixins是基础类,组件都是它子类,这样关系,所以mixins可以被组件覆盖。

 

这个mixins是个不错的想法,可以提高开发效率,和可维护性。

vue组件的公共方法都可以在里面实现,这样就可以变动一处,变动所有变动的地方。

 

vue--mixins

标签:mon   name   must   code   rom   关系   ror   创建   https   

原文地址:https://www.cnblogs.com/zhangzhicheng/p/9114148.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!