vue中mixin如何使用,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
一、定义公共的mixin文件:如mixin.vue
<节><代码> & lt; template> <代码>
<代码> & lt;/template> <代码>
<代码> & lt; script> <代码>
<代码>,,出口默认{ <代码>,,,,名字:& # 39;mixins-test-main& # 39;, <代码>,,,代码,组件:{} <代码>,,,代码,道具:{}, <代码>,,,代码,数据(){ <代码>,,,,,代码,返回{ <代码>,,,,,,,,mixinData: & # 39; mixin中的变量& # 39; <代码>,,,,,代码,} <代码>,,,}, <代码>,,,代码,方法:{ <代码>,,,,,代码,mixinFunction(){ <代码>,,,,,,,,返回& # 39;我是mixin里面的公共方法& # 39; <代码>,,,,,}, <代码>,,,}, <代码>,,,代码,安装(){ <代码>,,,}, <代码>,,,,计算:{} <代码>,代码,} <代码> & lt;/script> <代码>
<代码> & lt;风格scoped> <代码> & lt;/style>
二,在你页面内调用:需要进口这个mixin文件,然后通过mixin:[& # 39;文件名& # 39;]来使用就可以了
<节><代码> & lt; template> <代码>,代码,& lt; div> <代码>,,,,& lt; div @click=癶andleMixin"在调用mixin方法& lt;/div> <代码>,代码,& lt;/div> <代码> & lt;/template> <代码>
<代码> & lt; script> <代码>,从& # 39;进口MixinItem。/mixin # 39; <代码>
<代码>,,出口默认{ <代码>,,,,名字:& # 39;mixin-test-comp& # 39;, <代码>,,,代码,道具:{}, <代码>,,,,mixin: [MixinItem], <代码>,,,代码,组件:{} <代码>,,,代码,数据(){ <代码>,,,,,代码,返回{} <代码>,,,}, <代码>,,,代码,方法:{ <代码>,,,,,代码,handleMixin(){ <代码>,,,,,,,,console.log (& # 39; mixin-data=https://www.yisu.com/zixun/========' this.mixinData) <代码>,,,,,,,,让mixfun=this.mixinFunction() <代码>,,,,,,,,console.log (& # 39; mixin-fun====在祝辞祝辞& # 39;,mixfun) <代码>,,,,,}, <代码>,,,}, <代码>,,,代码,安装(){ <代码>,,,}, <代码>,,,,计算:{} <代码>,代码,} <代码> & lt;/script> <代码>
<代码> & lt;风格scoped> <代码> & lt;/style>
三、下面来说说mixin的特点:
, 1,方法和参数在各组件中不共享
,,,,比如混入对象中有一个控制:1的变量,在组件一个中改变租值为5,这时候在组件B中获取这个值,拿到的还是1,还是混入对象里的初始值,数据不共享
2,值为对象的选项,如方法、组件等,选项会被合并,键冲突的组件会覆盖混入对象的,比如混入对象里有个方法,组件里也有方法,这时候在组件里调用的话,执行的是组件里的一方法
3,值为函数的选项,如创建、安装等,就会被合并调用,混合对象里的钩子函数在组件里的钩子函数之前调,用同一个钩子函数里,会先执行混入对象的东西,再执行本组件的
四,与vuex的区别
vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。
mixin:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。
五,与公共组件的区别
组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据道具来传值,但本质上两者是相对独立的。
mixin:则是在引入组件之后与组件中的对象和方法进行合,并相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。
关于vue中mixin如何使用问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注行业资讯频道了解更多相关知识。
