vue的mixin的简单使用

最新推荐文章于 2023-05-09 00:27:39 发布
最新推荐文章于 2023-05-09 00:27:39 发布
阅读量1k 收藏
点赞数
分类专栏： 提升 文章标签： css html5 html vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39056703/article/details/121381413
版权

1新建一个libs文件夹 再建个myui文件夹 里面写上个index.js   mixin导出

 2新建一个vue的文件 里面就写个Button 写几种不同的class样式

3在index.js也就是mixin里面引入这个Button并注册

 

 4因为这个BUTTON样式要可以动态改变，所以这个BUTTON的class不能写死写成如下的样式

 5在相关页面引入

引入这个组件并用mixins 注册，

6使用引入的组件

修改个btnstyle属性看对不对

样式改变了，是想要的效果 样式随便写的有点丑。。。。但是效果达到了 

在mixin里面可以接受script里面的很多东西 这个只是随便写一下简单的写法 让你知道mixin大概是什么东西 后面写个mixin提升版本的

-------------------------------------------------------------------------------------------------------------------------------

忘记写了这个是单组件引用的 但是这个button你写好了你需要的样式 你会想要全局都能使用 你需要在全局里面引入 

1在main.js里面引入并且使用

 

2然后再页面看能不能使用

 

 

秋雨凉人心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
在 Typescript 中使用可被复用的 Vue Mixin功能
08-27
主要介绍了在 Typescript 中使用可被复用的 Vue Mixin功能，非常不错，具有参考借鉴价值,需要的朋友可以参考下
Vue 中mixin 的用法详解
08-27
总之，Vue 的 `mixin` 提供了一种高效复用代码的手段，但正确使用和管理 `mixin` 很关键，以保持代码的清晰性和可维护性。在实际项目中，应谨慎评估何时使用 `mixin`，以确保代码结构的整洁和可扩展性。
vue中mixin的一点理解
weixin_30512089的博客
05-22 165
　　vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？ 组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。 而mixins则是在引入组件之后，...
Vue 中mixins混入使用及vue中引入js/css文件,全局注册的区别,data中定义css样式
你还有我
10-28 4333
目录简介如何创建Mixins？使用Mixins 简介 mixins（混入），官方的描述是一种==分发 Vue ==组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和
【Vue实用功能】彻底搞懂Vue中的Mixin混入
weixin_44590591的博客
10-28 3026
【Vue实用功能】彻底搞懂Vue中的Mixin混入 Mixin和VueX的区别
vue中的混入mixins: [mixin]如何使用呢
熟悉 vue2 vue3 jquery js echarts
12-10 739
怎么使用 创建一个rollperiod js文件 // 定义一个混入对象 export default { created: function () { // }, methods: { 可以写任何一个方法定义 rollperiod(than,app,dataLen,conf){ } } } 在需要的页面中引入 import rollperiod from "./mixins/rollperiod"; 引入这个js文件 在expor
Mixin 混入详讲
qq_65591699的博客
09-25 149
页面和混入js文件中定义相同的数值或方法只会显示在页面定义的数值和执行页面定义的方法，因为 混入中的函数先执行，页面的函数后执行，页面的函数会覆盖混入js文件中的函数。2、在 js 文件中 可共用的 选项API和生命周期函数 然后导出。而执行生命周期函数会先执行混入js文件中的生命周期函数。1、在 assets 文件夹中 新建 js 文件。4、在页面使用 （与data同级）3、在使用的页面引入。
Vue之mixin全局的用法详解
10-18
3. **使用`mixin`**：现在，所有Vue组件都可以访问`mixin`中定义的方法。在数据源`data`中直接使用这些方法，如： ```javascript data() { return { time: this.formatDate(new Date()), // 其他数据 } } ``...
Vue使用mixin分发组件的可复用功能
10-16
主要介绍了Vue使用mixin分发组件的可复用功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vuejs之动态组件、修饰符、混入mixins、内置组件、路由懒加载
最新发布
nangongwenxuan的博客
05-09 243
动态组件、修饰符、混入mixins、内置组件、路由懒加载
vue全局引入scss（mixin）
程序员劝退师的博客
11-20 1884
前言 today，is good day，中午吃了个农民工外卖，有点撑，想在床上躺会，TMD，睁开眼天黑了，别说，冬天的上海天黑的挺早，基本上五点半就已经全黑了，住在出租屋的我，却感觉不到上海的灯火通明，繁华，毕竟在我们这些人的眼里，上海是有钱人的上海，它的繁华、它的璀璨与我无关，我只不过是外地过来讨饭的！回归正题吧！我们在写VUE的时候，会使用scss，也会做一些通用样式，方便使用，在写好的通用样式的时候，每次都要单文件导入，刚开始写的时候，感觉还好，后面工程量大了后，就显得麻烦，那么本文就全局导入scs
Vue 引入外部css样式两种方式 import 和link ； mixin.js的使用、全局引入封装的样式；
艾米的猫儿的博客
11-17 8667
全局使用动态样式及 mixins 的使用！
Vue-Mixin
qq_45882139的博客
06-20 2862
Vue框架现在基本上已经占据了前端的半壁江山，Vue的数据驱动和组件化的思想深入人心。Vue全家桶可能很多小伙伴都比较熟悉，在工作上也用得比较得心应手。但是今天讲的Vue中这个Mixin的用法我相信还有很多小伙伴不知道或者没有用过，或者有些小伙伴接手别人的Vue项目时看到里面有个Mixin文件夹，也会用，但是一直都是云里雾里的状态，今天我们就好好聊聊Mixin，争取以后不在犯迷糊。想要使用一个事物或者工具，我们首要先了解它是什么，这样我们才好对症下药。......
Vue项目如何配置、切换主题颜色（mixin + scss方式，简单高效）
h395910638的博客
02-28 9036
Vue项目主题切换，简单高效，一天搞定三个主题！
Vue中的mixin(混入)
RayShyy的博客
11-13 1958
Vue.js官方解释：混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。如果多个组件有很多相同的功能，那么就可以把这些相同的功能抽离出来写成一个混入对象，如有需要直接引入使用混入即可，引入后混入中在data中定义的数据，methods中定义的方法等都会成为组件中自己的数据和方法，相当于将混入对象中的数据、方法等合并到组件身上，可以减少代码的冗余。
vue中mixins（混入）的使用
JunVei的博客
08-23 961
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。作用：主要作用是继承和封装，将一些公共的代码抽离，可以减少代码量，提高复用性*
vue之混入(mixin)的详解
m0_49515138的博客
11-24 1182
个人理解：混入就是在一个公共的实例中写入公共的数据或者方法，这样的话vue会自动注入到(全局混入会注入到每一个实例组件中)、(单页面引入的会注入到引入的组件中)。混入的对象也就是mixin中可以写入的内容包含任意组件选项- - - - - -(也就是说你在export default { } 里边的内容都是可以混入的)有一种类似公共方法的感觉，但是可以写公共的data里面的数据，这一点比较方便。这里需要注意的是，在全局注册混入对象的时候是Vue.mixin(mixin);二、混入的方式一：单页面引入混入。
vue3 全局引入 mixins方法 并使用
云未然的博客
12-23 5220
创建 mixin文件 mixins.js const baseMixin = { data() {}, methods: { btnClick() { console.log('点击事件触发'); }, }, }; export default baseMixin; 在入口文件 main.js 中引入 import mixin from "./mixins/index.js"; app.mixin(mixin) 页面中使用 <template>..
vue中Mixin的用法
oldolder的博客
09-20 392
Mixins使用记录。
vue mixin 具体怎么使用
05-02
使用 Vue Mixin 的步骤如下： 1. 创建一个 Mixin 对象。在这个对象中，你可以定义一些方法、计算属性、生命周期钩子函数等。 ``` const myMixin = { created() { console.log('Mixin created hook called') }, ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值