Vue项目中混入mixins的使用可以做什么,具体用法是怎样
Admin 2022-06-24 群英技术资�
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文件� 引入
以上就是全局混入� 一般用的不多, 因为� 所有组件, 所有组件, 所有组� 都会被混入� 很少有这种需�
最后, 就要说一下, 混入的方法, 属性, 钩子函数� 如果本地已有的话� 产生冲突会是什么情况,如果本组件中有和混入的方法, 属性, 同名字的� 以本组件中的为主� 混入的不生效
但是 生命周期钩子函数 不管是本组件中的� 还是混入的, 都是会生效的� 并且� 会先执行混入的生命周期钩子, 再执行本组件的生命周期钩�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
跨域是指当一个资源去访问另一个不同域名或者同域名不同端口的资源时,就会发出跨域请求,下面这篇文章主要给大家介绍了关于vue使用vite配置跨域以及环境配置的相关资�,需要的朋友可以参考下
本文主要介绍了JavaScript如何用面向对象的方式封装拖拽对象,通过3种方式来实现,帮助读者更好的理解其原�
今天给大家分享的是,如何在最短的时候内实现右键菜单。高效实现需求,避免重复造轮子。感兴趣的可以了解一�
目录一.实现思路�.cavans前置准备1.获取cavans2.获取2d context对象3.绘制图片到cavans�4.获取在cavans上已绘制图片数据�.原理及实�1.黑白�2.灰色�3.反转4.复古5.�
这篇文章主要为大家详细介绍了vue3.x使用swiper实现卡片轮播,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078