Vue中使用mixins

最新推荐文章于 2023-02-27 12:49:07 发布
最新推荐文章于 2023-02-27 12:49:07 发布
阅读量256 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yuoliku/article/details/115396150
版权
本文介绍了在Vue项目中如何使用mixins来减少重复代码，提高代码的可读性和维护性。通过实例展示了mixin的基本用法，强调了在开发过程中抽离重复逻辑的重要性，提倡封装全局处理函数以优化项目结构。
摘要由CSDN通过智能技术生成

前言

在业务组件中，可能存在大量相同的操作，例如获取数据,数据格式处理等等,重复写代码对于cv能手来说也比较烦，mixin可以帮助减少单个业务组件的代码。

在刚接手项目的时候看到部分文件的代码超过千行,顿感不适,细看代码存在大量重复的操作，甚至还存在一些没有用的代码，在git管理下应该确保没有无用的代码。

使用

先看下官方文档的例子，可以清晰的了解到mixin就相当于游戏的mod(也不知道比喻的恰不恰当)

企业微信截图_16173321551980.png

在项目中，可能我们通常都需要写以下几个方法,通常我们会发现很多的vue文件内写的这些方法都是相同的，那利用mixins我们就可以不需要重复的写相同的代码，同时这也是一种抽离的思想,在项目中遇到处理逻辑相同的，往往我们都会选择封装全局的处理函数。


        methods:{
   
            //获取数据
            getList(){
最低0.47元/天 解锁文章
JINMINGIS
关注
专栏目录
初识Vue-混入mixins（详解分发 Vue 组件中可复用功能）
百赢出品，必属精品
05-06 1463
混入是一种将可复用功能注入到 Vue 组件中的方式，它允许你将组件中的一些选项混合到多个组件中。混入是一种Vue.js提供的一种灵活的代码复用方式，允许将一组组件选项合并到一个对象中，然后将其应用到多个组件中。可以使用在Vue实例创建之前全局注册一个混入，使得混入对象中的选项对所有组件都可用。在组件中使用mixins选项引入一个或多个混入对象，使得这些混入对象中的选项对该组件及其子组件可用。混入对象可以包含数据、方法、生命周期钩子、计算属性、观察者和指令等组件选项。
vue 混合器mixins
wei_dan1129的博客
12-08 721
引入混合器的页面都会先在本页面mounted之前执行混合器的代码 <script> import {logMixins} from '@/utils/masterLogMixins.js'; export default { name: "DailyWork", mixins: [logMixins], data: function() { return { }; }, props: { }, compute
vue脚手架中使用mixin
qq_34609443的博客
05-09 361
1、什么是Mixin? 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 2. Mixin和Vuex的区别？ Mixin就是一个抽离公共部分的作用。在Vue中，Vuex状态管理是将组件之间可能共享的数据抽离出来。两者看似一样，实则还是有细微的区别，区别如下： Vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据
mixin介绍
那一刻的博客
08-09 1万+
Mixin概述 混入(mixin)提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项 例子 定义一个混入对象 export const myMixin = { data() { return { num: 1 } }, created() { this.func_one(); he
Vue中使用mixin
richest_qi的博客
02-10 1514
文章目录创建基础项目使用mixinmixin小结 创建基础项目 使用Vue脚手架创建一个项目，经改造后，项目目录如下所示， 其中，Company.vue的内容如下， <template> <div> <h2 @click="showName">公司名称：{{name}}</h2> <h2>公司地址：{{address}}</h2> </div> </template> <
vue项目中使用mixin
Feast_aw的博客
07-06 556
基类 export default { name: "basePage", created() { console.log("baseCreated"); }, methods: { onClick() { console.log('baseClick'); }, } } 子类页面 import basePage from './mix...
vue mixins
leverage2009的博客
06-21 425
转自：https://segmentfault.com/a/1190000009875015#articleHeader21.场景假设我们有几个不同的组件，它们的工作是切换状态布尔、模态和工具提示。这些提示和情态动词不有很多共同点，除了功能：他们看起来不一样，他们不习惯相同，但逻辑是相同的。//弹框 const Modal = { template: '#modal', data() { ...
详解Vue.js Mixins 混入使用
10-19
具体实现方式是使用Vue实例化时，将addLog对象作为混入对象添加到mixins数组中。 关于混入的调用顺序，当混入的方法和构造器的方法重名时，混入的方法无法展现，即不会覆盖构造器中的同名方法，而是都不被执行。这...
浅谈Vue3 Composition API如何替换Vue Mixins
10-15
2. **自定义指令和组合式函数**：Vue3 允许我们创建自定义指令（如 `v-my-directive`），并且通过组合式函数（也称为组合函数或组合API）将复杂的逻辑封装起来，这些函数可以返回需要在 `setup()` 中使用的对象，...
Vue Mixins
aminwangaa的博客
02-27 1198
Mixins 是一种 Vue.js 组件复用的方法，它允许您将一组组件选项合并到一个单独的对象中，然后将其应用于多个组件。
Vue之mixins
Jocelyn_书
05-20 159
https://www.jianshu.com/p/bcff647d24ec
vue-mixins
weixin_34417814的博客
02-13 302
2019独角兽企业重金招聘Python工程师标准>>> ...
vue的mixins
weixin_42216094的博客
02-10 904
vue中mixins的简单理解和使用。
Vue——mixins
lihaoen666的博客
09-30 728
基本使用 首先，在JS里面声明一个变量，里面保存一些公共用的方法、数据。调用的时候，直接通过mixins调用。实例//定义变量 var base = { methods: { toggle (){ if(this.visible){ this.visible = false; }else{
vue 混入（mixin）的使用
weixin_44690156的博客
07-25 8279
当组件使用了mixin时,mixin中的生命周期函数会先执行,然后在执行组件中的生命周期。mixin对象里的(components、methods、computed、data)这些选项，混入组件时选项会被合并，重名冲突时优先采用组件中定义的数据。mixin中定义的方法和参数在各组件中不共享，即当前组件对mixins的属性的修改，其他也引用了这个mixins的组件不会受影响;mixin中定义的生命周期函数会比引用组件的生命周期先执行,会和组件中定义的methods,created等选项合并调用;...
Vue中的mixins
热门推荐
qq_34941404的博客
01-10 1万+
Vue中的mixins 一、混入规则 1.data 同名已组件为准 data(){ return {} } 2.create 等钩子函数 先运行mix,再运行组件内 3.methods,components等 同名，以组件为准 二、局部混入和全局混入 1.局部混入 创建mixin.js文件，在需要的组件或者页面引入 import mixin from '../../mixins/mixin' export default{ mixins:[mixin], data(){ return {} }
Vue - mixins
sinat_33184880的博客
12-20 158
官方文档：https://cn.vuejs.org/v2/guide/mixins.html 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项（data/方法/生命周期钩子函数）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 当组件和混入对象含有同名选项时，发生冲突时以组件数据优先。 同名钩子函...
vue中的mixins如何使用
最新发布
09-14
Vue.js 中的 Mixins 是一种将共享的功能或属性从一个组件抽取到另一个组件的方式，这使得代码更模块化、易于复用。在 Vue 中，Mixins 通过 `extend` 或者 `mixin` 函数来实现： 1. 使用 extend 的方式： ```javascript // 定义一个 mixin 对象 const sharedBehavior = { methods: { sayHello() { console.log('Hello from Mixin'); } }, data() { return { name: 'Mixin' }; } }; // 在组件中使用 mixins export default { extends: Vue.component, mixins: [sharedBehavior], // 其他组件选项... }; ``` 2. 使用 mixin 函数： ```javascript // 创建 mixin function reusableMethods() { this.methods = { sayHello() { console.log('Hello from Mixin'); } }; } // 应用 mixin 到组件上 export default { created() { reusableMethods.call(this); }, data() { return { name: 'Component' }; } }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值