## **1. mixins作用** * 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 * **有点类似于继承的关系,定义组件的方法，数据供其他人使用，且数据和方法不共享** ## **2. 实例** ### **2.1 基础小案例** **1. mixins-test.js 定义公用数据和方法** ~~~ // 定义了一个字面量类型的 组件模板对象 export const m1 = { data() { return { sonmsg: { name: '小头儿子', age: 6 } } }, mounted(){ alert('mixins提供的mounted生命函数') }, methods: { myclick() { this.$emit('func', this.sonmsg) } } } ~~~ **2. mixins公用方法和数据** HelloWorld.vue ~~~ <template> <div class="hello"> {{sonmsg}} </div> </template> <script> import {m1} from '@/util/mixins-test' export default { name: "HelloWorld", props: { msg: String }, mixins: [m1] }; </script> ~~~ 弹出alert并显示共有数据   ### **2.2 数据和方法隔离** **新建一个testmixns.vue组件** * **引用了mixins共有数据的组件间，数据互相隔离不受影响** * 同一组件引入***methods,components*等，选项会被合并，冲突后，覆盖mixins引入的方法** * **生命周期函数会依次执行，不会覆盖** 重复的mounted方法，执行了两次，但是about组件的mounted方法执行的是自己的info方法， #### 生命周期函数，不会覆盖，依次执行（先执行mixins的） mixins ~~~ // 定义了一个字面量类型的 组件模板对象 export const m1 = { data() { return { sonmsg: {name: '小头儿子', age: 6} } }, mounted() { alert('mixins提供的mounted生命函数') // this.info() }, methods: { info() { alert("mixins的info方法"); } } } ~~~ testximns ~~~ <template> <div class="hello"> {{sonmsg.age+10}} </div> </template> <script> import {m1} from '@/util/mixins-test' export default { name: "testmixins", props: { msg: String }, mixins: [m1], mounted() { alert("test自己的mounted方法"); // this.info() }, methods:{ info() { alert("test自己的info方法"); } } }; </script> ~~~ mounted方法执行了两次    数据是隔离的  #### methods的方法会覆盖mixins的方法 ~~~ mounted() { // alert("test自己的mounted方法"); this.info() }, ~~~ ~~~ mounted() { // alert('mixins提供的mounted生命函数') this.info() }, ~~~ 两次mounted都执行自己的info方法