vue中mixins——混入

大家好，欢迎来到IT知识分享网。

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

1、 用法：

1.1 创建混入对象：创建mixins文件夹，在mixins文件夹下创建一个index.js文件

// 创建一个需要混入的对象  export const mixinstest = { 
    data(){ 
    return { 
    testData: '混入对象的data' } }, created(){ 
    console.log('这是混入对象的created') }, methods:{ 
    mixinsFun(){ 
    console.log('调用混入对象的methods的函数') } }, computed:{ 
    testData2(){ 
    return this.testData+'：这是混入对象计算结果。' } }, watch: { 
    testData(newVal,oldVal){ 
    console.log('混入对象的watch') } } } 

1.2 在组件内引入并引用混入

<template> <div> <div>{ 
   { 
   testData}}</div> <div @click="mixinsFun">{ 
   { 
   testData}}</div> <input type="text" v-model="testData"> <div>{ 
   { 
   testData2}}</div> </div> </template> <script> import { 
   mixinstest} from '../mixins/index' export default { 
    mixins: [mixinstest], data (){ 
    return { 
    testData:'这是组件的数据' } }, created(){ 
    console.log('这是组件的created') }, methods: { 
    mixinsFun(){ 
    console.log('调用组件的methods的函数') } }, computed:{ 
    testData2(){ 
    return this.testData+':这是组件计算结果' } }, watch: { 
    testData(newVal,oldVal){ 
    console.log('组件的watch') } } } </script> <style> </style> 

1.3 解释

1. 当在组件中和混入中有相同的‘testData’这个数据时，显示组件中‘testData’对应的数据；当只有混入中有‘testData’数据时，显示混入中‘testData’对应的数据。
2. 在组件中和混入中有相同的函数mixinsFun()时，在组件中调用时，调用的是组件中的mixinsFun()函数；当只有混入中有mixinsFun()函数时，在组件中调用mixinsFun()是调用混入中的。
3. 在组件中和混入中有相同的computed函数testData2()时，在组件中调用时，调用的是组件中的testData2()函数；当只有混入中有computed函数testData2()时，在组件中调用testData2()是调用混入中的。
4. 在组件中和混入中有相同的created()函数时，先执行混入中的created,再执行组件中的created。其他生命周期也一样。
5. 在组件中和混入中有相同的watch()函数testData时，先执行混入中watch的testData,再执行组件中watch的testData。

2、 mixins的特点

2.1 方法和参数在各组件中不共享

混合对象中的参数num

export const myMixin = { 
    data(){ 
    return { 
    num:1 } }, created(){ 
    this.console() }, methods:{ 
    console(){ 
    console.log('从 mixin 打印的') } } } 

组件1中的参数num进行+1的操作

<template> <div> template1里的num:{ 
   { 
   num}} </div> </template> <script> import { 
   myMixin} from './index' export default { 
    mixins: [myMixin], created(){ 
    this.num++; console.log(`组件1：${ 
     this.num}`) } } </script> 

组件2中的参数num未进行操作

<template> <div> template2里的num:{ 
   { 
   num}} </div> </template> <script> import { 
   myMixin} from './index' export default { 
    mixins: [myMixin], created(){ 
    console.log(`组件2：${ 
     this.num}`) } } </script> 

可以看出，组件1里改变了num里面的值，组件2中的num值还是混入对象里的初始值

2.2 值为对象的选项，如methods，components等，选项会被合并，两个对象键名冲突时，取组件对象的键值对。

混入对象中的方法

export const myMixin = { 
    data(){ 
    return { 
    //num:1 } }, created(){ 
    //this.console() }, methods:{ 
    fun1(){ 
    console.log('fun1 from mixin') }, fun2(){ 
    console.log('fun2 from mixin') } } } 

组件中的方法

<template> <div> template </div> </template> <script> import { 
   myMixin} from './index' export default { 
    mixins: [myMixin], created(){ 
    this.funself1() this.fun1() this.fun2() }, methods:{ 
    funself1(){ 
    console.log('funself1 from template') }, fun2(){ 
    console.log('fun2 from template') } } } </script> 

2.3 值为函数的选项，如created,mounted等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用

混入对象函数中的console

export const myMixin = { 
    data(){ 
    return { 
    //num:1 } }, created(){ 
    console.log('我是混入中打印的内容') } } 

组件函数中的console

<template> <div> template </div> </template> <script> import { 
   myMixin} from './index' export default { 
    mixins: [myMixin], created(){ 
    console.log('我是组件中打印的内容') } } </script>