vue中mixins的使用方法和注意点---mixins第一篇

1.mixins基础概况

混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

2.mixins的使用方法

2.1.先定义一个mixins，代码如下

export const myMixin = {

  data(){

    return {

      num: 1

    }

  },

  created(){

    this.hello()

  },

  methods:{

    hello(){

      console.log("hello from mixin")

    }

  }

}

2.2.把定义的mixins引入到组件中，代码如下

<template>
  <div class="template1">
    组件1
  </div>
</template>

<script>

  import { myMixin } from "./mixins/index.js";

export default {
  mixins:[myMixin]
}


</script>

3.mixins的特点

3.1.引入的mixins中的方法和参数在每一个使用组件中不共享

3.1.1.mixins对象中的参数

export const myMixin = {
  data(){
    return {
      num: 1
    }
  },
  created(){
    this.hello()
  },
  methods:{
    hello(){
      console.log("hello from mixin")
    }
  }
}

3.1.2.组件1引用mixins对象参数（把num参数加了1）

<template>
  <div class="app-container">
    <div class="template1">
      template1里面的num：{{num}}
    </div>
  </div>
</template>

<script>
import { myMixin } from "./mixins/index.js";
export default {
  mixins:[myMixin],
  created(){
    this.num++
  }
}
</script>

<style scoped>
.template1{
  font-size:28px;
  color:red;
}
</style>

3.1.3组件2引用mixins对象参数（没有做任何处理）

<template>
  <div class="app-container">
    <div class="template2">
      template2里面的num：{{num}}
    </div>
  </div>
</template>

<script>
import { myMixin } from "./mixins/index.js";
export default {
  mixins:[myMixin],
}
</script>

<style scoped>
.template2{
  font-size:28px;
  color:blue;
}
</style>

3.1.4.总结

组件1：组件1里面处理了num参数，num参数变成处理后的值

组件2：组件2没有处理num参数，组件2里面的num参数还是mixins里面的值，没有发生任何改变

3.2.引入的mixins中的为对象，如methods、components等

3.2.1.mixins中的对象会与组件里面的对象合并。对象里面的键名出现冲突的情况，组件的对象键会覆盖掉mixins中的对象键。

3.2.2.mixins代码，如下：

export const myMixin = {
  data(){
    return {
      num: 1
    }
  },
  methods:{
    func_one(){
      console.log("func_one from mixin");
    },
    func_two(){
      console.log("func_two from mixin");
    }
  }
}

3.2.3.组件的代码，如下：

<template>
  <div class="app-container">
    <div class="main">
      这是main
    </div>
  </div>
</template>

<script>
import { myMixin } from "./mixins/index.js";
export default {
  mixins:[myMixin],
  created(){
    this.func_main();
    this.func_one();
    this.func_two();
  },
  methods:{
    func_main(){
      console.log('func_main from mian');
    },
    func_two(){
      console.log('func_two from mian');
    },
  }
}
</script>

<style scoped>
.main{
  font-size:28px;
  color:blue;
}
</style>

3.2.4.打印台输出

3.3.引入的mixins中的为函数，如created、mounted等

3.3.1.会被合并调用，mixins中的函数在组件里的函数之前调用

3.3.2.mixins代码，如下：

export const myMixin = {
  data(){
    return {
      num: 1
    }
  },
  created(){
    console.log("created from mixins");
  }
}

3.3.3.组件代码，如下：

<template>
  <div class="app-container">
    <div class="main">
      这是main
    </div>
  </div>
</template>

<script>
import { myMixin } from "./mixins/index.js";
export default {
  mixins:[myMixin],
  created(){
    console.log("created from 组件");
  }
}
</script>

<style scoped>
.main{
  font-size:28px;
  color:blue;
}
</style>

3.3.4.打印台输出

 4.mixins与vuex的区别

4.1.vuex的特点

用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任何一个组件中修改此变量的值之后，其他组件中的此变量的值也会随之修改。

4.2.mixins的特点

可以定义共用的变量，在每个组件中使用，引入组件之后，各个变量是相互独立的。值的修改在组件中不会相互影响。

5.mixins与公共组件的区别

5.1.组件的特点

在父组件中引入子组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的

5.2.mixins的特点

把mixins引入到组件之后，与组件中的对象和方法进行合并，相当于扩展了组件的对象和方法，可以理解为形成了一个新组件

参考---https://www.cnblogs.com/Ivy-s/p/9937173.html