vue mixins

1、概述

mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改

2、示例

（1）定义一个mixin.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' } } }

这样就可以直接调用到混入对象中的hello方法

 

3、第二个示例

<template>

</template>
<script> import Vue from 'vue'

    var mixin = { created: function () { console.log(1) }, methods:{ hello(){ console.log('mixin：hello') } } } export default { data() { return { } }, methods: { hello(){ console.log('组件：hello') } }, created: function () { console.log(2) }, mixins: [mixin], mounted: function(){ this.hello(); } } </script>

输出为：

created初始化了2次，并且组件自己的created后执行。
对于 methods, components 和 directives 将合并到同一个对象内。如果键冲突则组件的选项优先。