理解vue中mixin混入的用法及项目中如何使用mixin

混入

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

那么如何在项目中使用呢？
一/在文件中新建一个mixin文件夹(名字随便取),文件夹中再建一个mixin.js(随便取)用来放混入的代码。

二/在mixin.js文件中写入需要混入的代码

export default {
  data() {
    return {
      name:'大明'
    }
  },
  created() {
    console.log('混入对象的钩子被调用')
  },
  methods:{
    handleClick() {
      console.log('hi')
      this.name = '小鹏'
    }
  }
}

三/在vue单文件中引入

<template>
  <div class="home">
    <h1>{{name}}</h1>
    <van-button @click="handleClick">点我有惊喜</van-button>
  </div>
</template>

<script>
//引入混入的文件
import mixin from '../mixin/mixin'
export default {
  mixins:[mixin],
  data() {
    return {
    }
  },
  methods:{
  }
};
</script>

这里的name数据和handleClick方法实际就是引用的混入文件中的数据和方法。
效果：


可以看到：
在data和methods数据没有冲突时，
在一进入页面，和点击“点我有惊喜”按钮后，页面直接展示的就是混入对象里面带来的数据和方法。

补充：

选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，
1 .数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。 — 组件优先
2 .值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。 — 组件优先
3 .同名钩子函数（如: created,mounted,updated等等）将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。 — 混入的优化
注意：Vue.extend() 也使用同样的策略进行合并。

// vue单文件：

<template>
  <div class="home">
    <h1>{{name}}</h1>
    <van-button @click="handleClick">点我有惊喜</van-button>
  </div>
</template>

<script>
import mixin from '../mixin/mixin'
export default {
  mixins:[mixin],
  data() {
    return {
      name:'小美'
    }
  },
  created() {
    console.log('组件钩子被调用')
  },
  methods:{
    handleClick() {
      console.log('自带')
      this.name = '我是组件自带的名字'
    }
  }
};
</script>

效果：

可以看到：
created钩子函数都有调用，混入优先于组件自身；
页面一进入，有data冲突时使用的是vue组件自身的data；

点击"点我有惊喜"后，methods方法有冲突时，页面展示的是组件自带的methods方法；