本文摘自PHP中文网,作者coldplay.xixi,侵删。
vue mixins是一种分发Vue组件中可复用功能的非常灵活的方式,混合对象可以包含任意组件选项,当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。
本教程操作环境:windows7系统、Vue2.9.6版,该方法适用于所有品牌电脑。
mixins
混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。
混合对象可以包含任意组件选项。
当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。
mixins理解
组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立。
而mixins则是在引入组件之后,则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了。
单纯组件引用:
父组件 + 子组件 >>> 父组件 + 子组件
mixins:
父组件 + 子组件 >>> new父组件
有点像注册了一个vue的公共方法,可以绑定在多个组件或者多个Vue对象实例中使用。另一点,类似于在原型对象中注册方法,实例对象即组件或者Vue实例对象中,仍然可以定义相同函数名的方法进行覆盖,有点像子类和父类的感觉。
mixins的使用
方法的复用
html
1 2 3 4 |
|
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
在借助mixins之前,在两个不同的组件的组件中调用foo方法,需要重复定义,倘若方法比较复杂,代码将更加冗余。若借助mixins,则变得十分简单:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
虽然此处,两个组件用可以通过this.msg引用mixins中定义的msg,但是,小编尝试过,两个组件引用的并不是同一个msg,而是各自创建了一个新的msg。如果在组件中定义相同的data,则此处会引用组件中的msg,而非mixins中的。
以上就是vue mixins是什么的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《vue》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者