vue混入（mixins）的使用方法和注意点

最新推荐文章于 2024-08-17 12:39:26 发布
最新推荐文章于 2024-08-17 12:39:26 发布
阅读量452 收藏 3
点赞数 4
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/java_dazhuzhu/article/details/139785859
版权

mixins的特点

1 方法和参数在各组件中不共享

混合对象中的参数num

在这里插入图片描述

组件1中的参数num进行+1的操作

在这里插入图片描述

组件2中的参数num未进行操作

在这里插入图片描述

看两组件中分别输出的num值

在这里插入图片描述

在这里插入图片描述

大家可以看到，我在组件1里改变了num里面的值，组件2中的num值还是混入对象里的初始值

2 值为对象的选项，如methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的

混入对象中的方法

在这里插入图片描述

组件中的方法

在这里插入图片描述

打印台的输出

在这里插入图片描述

3 值为函数的选项，如created,mounted等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用

混入对象函数中的console

在这里插入图片描述

组件函数中的console

在这里插入图片描述

打印台的打印

在这里插入图片描述

与vuex的区别

经过上面的例子之后，他们之间的区别应该很明显了哈~

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

文末

技术是没有终点的，也是学不完的，最重要的是活着、不秃。

零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。

最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

自学最怕的就是缺乏自驱力，一定要自律，杜绝“三天打鱼两天晒网”，到最后白忙活一场。

高度自律的同时，要保持耐心，不抛弃不放弃，切勿自怨自艾，每天给自己一点点鼓励，学习的劲头就会很足，不容易犯困。

技术学到手后，找工作的时候一定要好好准备一份简历，不要无头苍蝇一样去海投简历，容易“竹篮打水一场空”。好好的准备一下简历，毕竟是找工作的敲门砖。

拿到面试邀请后，在面试的过程中一定要大大方方，尽力把自己学到的知识舒适地表达出来，不要因为是自学就不够自信，给面试官一个好的印象，面试成功的几率就会大很多，加油吧，骚年！

参考信息
关注
elementui table 筛选
逐梦十年的博客
07-29 342
想实现如下页面的功能，怎么做呢，一步步来实现 先写一个input输入框和button按钮 记得在input输入框v-model双向绑定一个值，同时button按钮绑定一个点击事件 在methods方法里写方法逻辑 this.listQuery.page.current=1意思是不管搜索时表格已经翻到第几页，点击搜索按钮后，统一回到第一页。 listFun是自己定义函数，作用是调用后台接口，list后边跟的this.listQuery是v-model值。th...
用 vite 构建 vue3 + TS 项目实战
weixin_37883657的博客
04-26 1万+
1、项目初始化 npm install create-vite@2.9.0 -g // 全局安装 create-vite npm init @vitejs/app shop-admin // 初始化项目(shop-admin 项目名) cd shop-admin npm install npm run dev 2、eslint 基础配置 npm install eslint --save-dev npm install@eslint/create-confi...
vite+vue3+ts 手把手教你创建一个vue3项目
attengtiong的博客
12-21 7485
Vue3+Vite3+TS前端工程化实践
vite+vue3+ts项目搭建
weixin_44298215的博客
06-06 1882
从0开始搭建一个vue3+vite+ts项目
vite构建vue3+Ts项目
W2279567793的博客
10-10 7232
vite+vue3+ts项目构建
Vue混入mixins滚动触底的方法
10-15
Vue中的混入（mixins）是一种复用组件逻辑的有效方式，尤其在处理共通行为如滚动触底加载更多数据时。本文将详细讲解如何利用Vue的mixins实现滚动触底的功能，并提供优化和复用代码的策略。 首先，我们要了解如何...
Vue之Mixins(混入)的使用方法
10-16
通过混入，组件可以继承混入对象中的属性和方法，从而实现共享代码的目的。在本篇文章中，我们将深入探讨Vue Mixins的使用方法及其注意事项。 首先，让我们了解如何创建和使用混入对象。假设我们有一个名为`Mymixin...
vue中的mixins混入使用方法_vue 全局mixins
2401_84446882的博客
04-27 838
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】外链图片转存中…(img-SbwcnTJd-1714160251607)][外链图片转存中…(img-A8wIJAh7-1714160251608)][外链图片转存中…(img-f2J5Zh9a-1714160251608)][外链图片转存中…(img-8fmceMwW-1714160251609)]
用vite搭建vue3+ts项目
哈喽234的博客
09-27 1141
1：首先vite环境安装或者2：输入项目的名字,在这里用vue3_test3：选择项目类型，这里选择Vue+ts4：出现下图，初始化基本创建完成项目文件目录如下我们可以发现文件有标红提示，找不到依赖文件，这时候我们到项目目录下，执行一下npm install安装一下相关依赖即可，此时可以看到已经不报错了现在我们npm run dev启动看看此时，项目初始化完成。
element-ui的表格筛选（后端筛选）
moran_3346的博客
02-29 597
以上为element-ui表格多条件筛选筛选，:filter-multiple="false"表示是否为单选。
WEB前端助手（FeHelper）
10-11
chrome fehelper 自动支持json化，直接拖到浏览器安装
搭建基于 Vite + Vue3 + TS 项目模板
最新发布
qq_45897239的博客
08-17 959
一、项目概述 二、创建项目 三、配置路径别名 四、配置路由 五、引入状态管理工具 Pinia 六、引入 UI 框架 Element-plus 七、添加全局接口配置文件 八、集成 Axios 九、集成 VueUse 十、集成 Less
element ui 中 Cascader 级联选择器实现 动态加载 动态禁用 入门
qq_33361202的博客
01-16 5982
当点击的 根选项 有 子选项 时，会向后台发送请求，并且接收数据实现动态加载。点击特殊选项时，可以禁用其他选项。
Vue3+Vite+Ts(手把手教你创建项目)
唯见青山不见君
11-08 1884
手把手教你用Vue3+Vite+Ts搭建vue3项目
vue3 +ts 安装并封装axios
热门推荐
weixin_59916662的博客
10-16 1万+
vue3 +ts 安装，封装，使用axios
在vue中将markdown转换成html并渲染样式
juju的博客
02-25 2131
1.下载依赖 npm install marked 2.在需要使用的页引入 import marked from 'marked' 3.语言转换 注：这里blog是转换后的html语言，而blogDetailData.content是从数据库取出来markdown文本 this.blog = marked(this.blogDetailData.content) 4.将转换后的html文本绑定在div上 注意这里使用的是v-html，而不是v-text，虽然同样是绑定文本，但是v-text绑定之后
vite 创建 vue3 + ts项目
Minyoung 的博客
12-20 1360
初始化项目 创建一个文件夹，名称就是你的项目名称即可，在文件夹中使用以下命令 初始化项目 npm init vite-app 安装依赖 npm install 或 yarn 安装插件 添加typescript，这里直接使用vue add typescript会报错，需要先添加一个依赖 npm install @vue/cli-service --save-dev 或 yarn add @vue/cli-service -D 使用vue添加插件，如果没有安装@vue/cli的先全局安装 npm ins
vite创建vue3+ts项目
weixin_43897062的博客
10-19 392
vite创建vue3+ts项目
vue mixins使用方法
09-01
使用Vue mixins的方法如下： 1. 在src目录下创建一个mixins文件夹，并在该文件夹下新建一个myMixins.js文件。 2. 在myMixins.js文件中，定义一个对象，并在该对象中定义你想要在组件中复用的功能选项，如data、components、methods、created、computed等。 3. 使用export导出该对象。 4. 在需要使用mixins的组件中，通过import引入myMixins.js文件，并在组件的mixins选项中添加该对象。 5. 在组件中可以直接使用mixins对象中定义的功能选项，这样可以提高代码的重用性，并使代码保持干净和易于维护。 示例代码如下： ```javascript // 在myMixins.js文件中定义mixins对象 export const myMixins = { data() { return { // 定义共用的data属性 } }, methods: { // 定义共用的方法 }, created() { // 定义共用的created钩子函数 }, // 其他共用的功能选项 } // 在需要使用mixins的组件中引入并使用mixins对象 import { myMixins } from "@/mixins/myMixins.js"; export default { mixins: [myMixins], // 组件的其他选项 } ``` 通过以上步骤，你可以轻松地在Vue组件中使用mixins，从而实现代码的重用和提高开发效率。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue — 详解mixins混入使用](https://blog.csdn.net/qq_42198495/article/details/118424355)[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: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值