vue中混入mixins用法

vue中混入mixins用法：

vue中提供了一种混合机制 mixins，用来更高效的实现组件内容的复用,
开始感觉和组件没啥区别,但是在使用之后 发现还是有些不同的

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

网上有好多对于 mixins的理解

组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

单纯组件引用:父组件 + 子组件>>>父组件 + 子组件 mixins:父组件 + 子组件>>>new父组件有点像注册了一个vue的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用。另一点，类似于在原型对象中注册方法，实例对象即组件或者Vue实例对象中，仍然可以定义相同函数名的方法进行覆盖，有点像子类和父类的感觉

对于mixins 我在项目中并没有用到 但是为了搞懂它的用法 写了一个demo
废话不多说上栗子吧

mixins的使用

1 定义混入对象

2 混入对象引入到当前组件中

3 运行效果

注意 如果在引入时报错 Cannot read property ‘components’ of undefined 参考此文章解决

mixins 特点

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

定义混入对象的参数 val

组件1中给val ++

组件2中 未对val任何操作

效果

2 mixins 对象中定义的 属性或方法 在组件中如果重复会被覆盖

混入对象定义mix1方法

组件定义val 属性 和 mix1方法

效果 对象中val属性和mix方法 都被组件中的 覆盖掉了

3 混入对象的函数在组件之前调用

对象中

组件中

效果 混入对象 在 组件之前 执行

4 混入对象中定义异步请求时 返回值 取不到 要返回函数

混入对象中定义 promise

组件中 调用 promise

效果 调用混入对象的异步方法 返回 undefined

既然直接返回值 是不行的 那么解决办法 我们可以返回 函数


最后的效果

与vuex的区别

vuex：用来状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改；
Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响；

与公共组件的区别

公共组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的；
Mixins：在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件；