Vue项目中混入mixins的使用可以做什么,具体用法是怎样

Admin 2022-06-24 群英技术资�

这篇文章给大家分享的是Vue项目中混入mixins的使用可以做什么,具体用法是怎样。小编觉得挺实用的,因此分享给大家做个参考,文中的介绍得很详细,而要易于理解和学习,有需要的朋友可以参考,接下来就跟随小编一起了解看看吧�
 


   
Vue中有一个设置项叫做混入 (mixins�, 它的使用是用来做代码复用的。同时, 这个mixins 也分为局部混入和全局混入

vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~

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

下面先说一� mixins 的应用场景, 假设现在我们两个组件� 当这两个组件被点击时� 都要 console.log 一下, data 中的一个name 属性的�

第一个组件是 school组件,如下图

第二个组件是 student组件

我们可以看到� 不同的两个组件, 有一个相同功能的方法� 这种写法会导到, 我们要在两个组件中写出同样的代码� 两个组件还可以接受, 如果� 200个组件都要这样的功能� 是不是很烦人的感觉, 这时我们就可以使� mixins 来复用代�

使用方法

1、创建一� mixin 文件� 并把相应的数� 暴露出去

既然暴露出来的, 那肯定是给别人用的, 当然是给组件用的

2、先说一个局部混入, 局部混入, 就是说在 VueComponet 中一个个混中� 全局混入呢, 那当然就是在 Vue (Vm) 对象上混�

下面是局部混入的写法

同样的, 对student 组件也进行这样的操作

完成后, 当我们点击时� 功能同样的可以完成, � showName 的方法, 就是我们通过 mixins 混入的, 我们只写了一�

以上就是局部混入的,它是在每一� VueComponet中都要混入一�

3、说一下全局混入� 我们把它混入� Vue 的对象中� 这样� vue 下的 所有组件,都会有这个方法,不用每一个组件去写了,这种写法是� 确定所有的组件都需要这个方法或属性时才用的, 一般我们不会这样用�

方法如下

� main.js文件� 引入

以上就是全局混入� 一般用的不多, 因为� 所有组件, 所有组件, 所有组� 都会被混入� 很少有这种需�

最后, 就要说一下, 混入的方法, 属性, 钩子函数� 如果本地已有的话� 产生冲突会是什么情况,如果本组件中有和混入的方法, 属性, 同名字的� 以本组件中的为主� 混入的不生效

但是 生命周期钩子函数 不管是本组件中的� 还是混入的, 都是会生效的� 并且� 会先执行混入的生命周期钩子, 再执行本组件的生命周期钩�


到此这篇关于“Vue项目中混入mixins的使用可以做什么,具体用法是怎样”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章,希望大家以后多多支持群英网络!
标签� 混入mixins

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻�
7X24小时快速响�
一站式无忧技术支�
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 � 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部