Vue mixin 混入

1:介绍：当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

a）组件引入父组件后，时单独开辟了一个区域，两者是两个独立的个体，通过props和事件emit进行联系

单纯组件引用：

父组件+子组件-->>父组件+子组件

b）而mixin是引入一个组件后，把引入的mixin组件跟当前的组件进行合并操作，当data里有相同的数据时，以组件的数据优先；当methods里面方法名有相同时，以组件的方法为优先。如下

mixin引用

mixin对象+组件-->>新组件

2：引入规则

a）相同的数据时，以组件的数据优先

      var model = {

            data() {

                return {

                    message: 'world',

                    message1: 'china'

                }

            }

        }

        new Vue({

            mixins: [model],

            data() {

                return {

                    message1: 'sicuan',

                    message2: 'chengdu'

                }

            },

            created() {

                console.log(this.$data)

            }

        })     

//  { message1: "sicuan", message2: "chengdu", message: "world" }

 

b)同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

        var model = {

            created() {

                console.log('混入对象的钩子被调用')

            }

        }

        new Vue({

            mixins: [model],

            created() {

                console.log('组件钩子被调用')

            }

        })

// => "混入对象的钩子被调用"

// => "组件钩子被调用"

c)值为对象的选项，例如methods，components，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

==========引用====

1 方法和参数在各组件中不共享
2 **数据对象**
  mixin的数据对象和组件的数据发生冲突时以组件数据优先。
3 **钩子函数**
  同名钩子函数将会混合为一个数组，都将被调用到，但是混入对象的钩子将在组件自身钩子之前调用。
4 **值为对象的选项**
  值为对象的选项，例如`methods`,`components`和`directives`，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。

 

============引用==========

常见场景

      有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，此时的你就像是来到了一个分岔路口：我是把它拆分成两个不同的组件呢？还是保留为一个组件，然后通过props传值来创造差异性从而进行区分呢？

      两种解决方案都不够完美：如果拆分成两个组件，你就不得不冒着一旦功能变动就要在两个文件中更新代码的风险，这违背了 DRY 原则。反之，太多的props传值会很快变得混乱不堪，从而迫使维护者（即便这个人是你）在使用组件的时候必须理解一大段的上下文，拖慢写码速度。

      使用Mixin。Vue 中的Mixin对编写函数式风格的代码很有用，因为函数式编程就是通过减少移动的部分让代码更好理解。Mixin允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当，他们不会改变函数作用域外部的任何东西，因此哪怕执行多次，只要是同样的输入你总是能得到一样的值，真的很强大！

 

eg： 我们有一对不同的组件，它们的作用是通过切换状态（Boolean类型）来展示或者隐藏模态框或提示框。这些提示框和模态框除了功能相似以外，没有其他共同点：它们看起来不一样，用法不一样，但是逻辑一样。