vue.js 中的mixins 的用法

不用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里使用

  ================================================


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.jsmixins是一种非常灵活的方式,用于在组件分发可复用的功能。混入对象是一个JavaScript对象,可以包含组件任意功能选项,例如data、components、created、methods、computed、watch等等。当组件使用混入对象时,混入对象的选项将被合并到组件本身的选项。如果混入对象和组件含有同名选项,这些选项会以恰当的方式进行合并,冲突时组件的选项优先。 在Vue组件使用mixins时,需要在组件的script项引入mixins文件,并在组件的mixins选项添加对应的mixins对象。例如,在需要调用的组件页面引入pageMixin.js文件,并在组件的mixins选项添加pageMixin对象。这样,混入对象的选项就会被合并到当前组件。 总结来说,混入对象可以帮助我们在不同的组件共享和复用功能选项,提高代码的可维护性和重用性。通过合并混入对象的选项,我们可以方便地在组件使用混入对象定义的属性和方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue的混入(mixins)](https://blog.csdn.net/qq_44308109/article/details/120967912)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [详解Vue.js Mixins 混入使用](https://download.csdn.net/download/weixin_38633157/12963696)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值