Front-end mixins (mixins)

1. Partial mixing:

1) Mixin provides a very flexible way to distribute reusable functions in Vue components. A mixin object can contain arbitrary component options. When a component uses a mixin, all of the mixin's options will be "mixed in" into the component's own options.

2), option merge

When components and mixins contain options with the same name, those options will be "merged" appropriately.

For example, data objects are recursively merged internally, and component data takes precedence when conflicts occur.

①: Create a new minxins.js file

一、局部混入：

1）、混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

2)、选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

①：新建minxins.js文件

②: Use components:

//组件
import minxins  from "./common/minxins";
export default{
    mixins: [Drugs,minxins],//混入多个文件的写法
    data(){
        return{
             message:'使用混入对象的组件',
             bar:'bar',
 
        }
    },
    mounted() { 
    console.log(this.message) // 使用混入对象的组件  //发生冲突时以组件数据优先
    console.log(this.$data) //{ message: "使用混入对象的组件", foo: "foo", bar: "bar" }
  },
 
}

3) The hook functions with the same name will be combined into an array, so all of them will be called. Also, the hooks of the mixin object will be called before .


//minxins.js 文件
export default{
    data(){
        return{
            message:'混入对象',
            foo:'foo'
        }
    },
    created(){
        console.log('混入对象的钩子先被调用')
    }
}

//组件
import minxins  from "./common/minxins";
export default{
    mixins: [Drugs,minxins],//混入多个文件的写法
    data(){
        return{
             message:'使用混入对象的组件',
             bar:'bar',
 
        }
    },
    created(){
      console.log('组件钩子被调用')
    }, 
}
// 控制台结果：
// 混入对象的钩子先被调用
// 组件钩子被调用

4) Options whose values are objects, such as methods, , components and directives, will be merged into the same object. When the key names of two objects conflict, take the key-value pair of the component object.


//minxins.js
 
export default {
    data() {
        return {
            message: '混入对象', 
        }
    },
    created() {
      this.bar() //可调用组件中的方法 也可获取组件中的对象
    },
    methods: {
        foo: function () {
            console.log('foo')
        },
        conflicting: function () {
            console.log('from mixin')
        }
    }
}


//组件
import minxins  from "./common/minxins";
export default{
    mixins: [minxins],
    data(){
        return{
             message:'使用混入对象的组件' 
        }
    },
    created(){
      this.foo();
      this.bar();
      this.conflicting(); 
    }, 
    methods:{
      bar() {
        console.log("bar");
      },
    conflicting() {
      console.log("from com");
    },
 }
// 控制台结果：
//bar
//foo
//bar
//from com

Note: methods mixed into objects and components can call each other; objects can acquire each other; the Vue.extend() same strategy is also used for merging.

2. Global mix-in:

1) Define the mixin in main.js, and use it directly on the page you need to use, without re-introduction (the method of use is the same as local mixing)


//main.js 中
//方式一
Vue.mixin({
  data(){
    return{
      globalMix:'globalMix'
    }
  },
  methods:{
    hello(){
      console.log('hello,globalMix')
    }
  }
})
//方式二
// main.js
import mixin from '自己的文件路径/mixin';
Vue.mixin(mixin);

Front-end mixins (mixins)

Guess you like