vue mixins应用场景

学习知识得在应用场景中去应用，这样才能真正学到东西，记忆也深刻，以后碰到类似的东西就会了。

1、在assets文件夹下创建一个js文件

// 创建一个需要混入的对象

export const mixinTest1 = {

    created() {

        this.hello();

    },

    methods: {

        hello() {

            console.log('mixinTest1');

        }

    }

};

2、在组件中使用刚刚创建的混入

import {mixinTest1} from './../assets/js/mixin';

export default {

    mixins:[mixinTest1],

    name: 'hello',

    data () {

        return {

            msg: 'Welcome to Your Vue.js App'

        }

    }

}

3、如果组件中定义的方法与混入对象中的方法/属性一样,组件中的优先级大于混入对象中的(方法会调用多次)；

4、混入对象中可以定义抽象方法,使用混入的组件必须重写该方法

...

methods: {

    handlePlaylist() {

        throw new Error('component must implement handlePlaylist method')

    }

}

...

　　其实我是抄别人的，我认为并不可耻，重要的是自己能理解就行了，不在乎别人的看法。能学到知识就是好的。哈哈

巴特西

vue mixins应用场景

最新文章

热门文章