vue.js 中的mixins 的用法

Posted 2021-07-21 versionli

不用mixins的代码

父组件home.vue 代码如下

组件componentA.vue 代码如下：

组件componentB.vue 代码如下：

页面展示

使用mixins，把两上子组件的公用部份抽出来

建一个counter.js，把公共部份的代码抽出来，代码如下：

之后把组件A和组件B的公用代码删掉，引入mixins，如下：

这样就可以在mixins里counter.js 维护两个组件的公共函数

mixins 里的counter.js还可以建created初始化勾子，用来初始化一些公共数据，如获取参数，获取localstorage里的数据等等

注间，当mixins里声明的数据和组件里声明的数据是同一个字段时，组件里的优先级更高

mixins 还可以在mian.js里使用

但是实际上很少用到，其实两个不同功能组件的公共数据是很少相同的，即使相同维护起来也不方便。

如果大家想实践学习php，thinkphp，Redis，vue，uni-app等技术，推荐开源电商系统likeshop，可以借鉴思路，可去版权免费商用。gitee下载地址：

https://gitee-github.com/Q2Y9N10e