【vue】混合模式
因为工作的分配,写财务的对账部分,因为3个页面的设计和功能基本相同,都是查询筛选表格,所以用混合模式优化了部分代码。用混合把一些共用的东西抽离了出来。
具体使用方法参照文档。
https://cn.vuejs.org/v2/guide/mixins.html
(开个玩笑)
文档是这么介绍的:混入是一种分发vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
就是把<script>里的放在Js里,然后再在vue页面里使用import引用。在这里我封装了一个mdcard组件,样式是通过父组件操作的,因为有两个子组件都是通过Border来判断样式的,所以我将这个方法写在了混合里面,

在其用到这个方法的组件里这样使用就可以了

注意:谨慎使用全局混入对象,因为会影响到每个单独创建的vue实例(包括第三方模板)。大多数情况下,只应当应用于自定义选项,就像文档的示例一样。将其用作plugins以避免产生重复应用

【vue】混合模式的更多相关文章
- vue服务器端渲染指南研究
什么是服务器端渲染(SSR)? Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HT ...
- 使用基于Vue.js和Hbuilder的混合模式移动开发打造属于自己的移动app
近几年,混合模式移动应用的概念甚嚣尘上,受到了一些中小型企业的青睐,究其原因,混合模式开发可以比传统移动开发节约大量的开发成本和人力成本. Hybrid App(混合模式移动应用)是指介于web-ap ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
随机推荐
- Saiku 系列
1.Saiku2.6 Saiku315 链接SQL的JDBC字符串 2.Saiku2.6 配置数据源 3.Saiku2.6 保存查询后,重新打开报 Error Loading Query错误. 4.C ...
- [性能测试]:内存泄漏以及MAT(Memory Analyzer Tool)工具使用分析
一.今天在查看服务器时候,发现内存使用率直接就到99%了, 二.用ps -uaxw查看一下,每个占用内存较多的进程情况: 三,挑出可疑的进程,生成dump文件: jmap -dump:format=b ...
- [Xamarin] 製作吐司(Toast)以及圖文並茂的Toast (转帖)
最近在看Xamarin使用C#來撰寫Android App . 紀錄一下,順便給之後有需要的人可以有所參考 :) 今天要來聊的是關於Toast 這東西,這在以前Android 上面我是很常使用 拿來l ...
- python-Lock锁线程同步和互斥
#!/usr/bin/python #coding=utf-8 #线程间通信的同步与互斥操作-锁 import threading a=b=0 lock=threading.Lock() def va ...
- 设置spacevim字体显示乱码问题
https://github.com/powerline/fonts clone powerline fonts 仓库 执行项目中的 install.sh 安装字体 修改终端配置中使用的字体为 xxx ...
- struts2 servlet之间通信
Servlet之间通信的方式有两大类,每个类有三种不同的方法 1.request 2.session 3.application 不实现ServletContextAware,SessionAware ...
- sourceTree git 空目录从远程仓库克隆代码出现warning: templates not found
解决办法: 在安装git时没有默认安装到c盘,而是安装到了d盘.在使用SourceTree进行代码克隆时提示warning: templates not found in D:\software\de ...
- Python(3):文件读写与异常
访问路径: 文件读写必然涉及到文件会放在某个路径下.在python里,可以通过引入os包来实现切换当前访问的路径: # 假设我在 /home/zyq/KiDe/Python/test 文件夹中有一个文 ...
- ant使用小结
使用builder.xml的方式:完成的工作:打jar包并运行,其中引用了第三方jar和配置文件: <?xml version="1.0" encoding="UT ...
- JavaScript中有对字符串编码的三个函数:escape,encodeURI,encodeURIComponent
JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...