mixin机制 vue_vue mixins组件复用的几种方式(小结)
最近在做项目的时候,研究了mixins,此功能有妙处。用的时候有这样一个场景,页面的风格不同,但是执行的方法,和需要的数据非常的相似。我们是否要写两种组件呢?还是保留一个并且然后另个一并兼容另一个呢?
不管以上那种方式都不是很合理,因为组件写成2个,不仅麻烦而且维护麻烦;第二种虽然做了兼容但是页面逻辑造成混乱,必然不清晰;有没有好的方法,有那就是用vue的混合插件mixins。混合在Vue是为了提出相似的数据和功能,使代码易懂,简单、清晰。
1.场景
假设我们有几个不同的组件,它们的工作是切换状态布尔、模态和工具提示。这些提示和情态动词不有很多共同点,除了功能:他们看起来不一样,他们不习惯相同,但逻辑是相同的。
//弹框
const Modal = {
template: '#modal',
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
},
components: {
appChild: Child
}
}
//提示框
const Tooltip = {
template: '#tooltip',
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
},
components: {
appChild: Child
}
}
上面是一个弹框和提示框,如果考虑做2个组件,或者一个兼容另一个都不是合理方式。请看一下代码
const toggle = {
data() {
return {
isShowing: false
}
},
methods: {
toggleShow() {
this.isShowing = !this.isShowing;
}
}
}
const Modal = {
template: '#modal',
mixins: [toggle],
components: {
appChild: Child
}
};
const Tooltip = {
template: '#tooltip',
mixins: [toggle],
components: {
appChild: Child
}
};
用mixins引入toggle功能相似的js文件,进行混合使用
2.可以合并生命周期
//mixin
const hi = {
mounted() {
console.log('this mixin!')
}
}
//vue组件
new Vue({
el: '#app',
mixins: [hi],
mounted() {
console.log('this Vue instance!')
}
});
//Output in console
> this mixin!
> this Vue instance!
先输出的是mixins的数据
3、可以全局混合(类似已filter)
Vue.mixin({
mounted() {
console.log('hello from mixin!')
},
method:{
test:function(){
}
}
})
new Vue({
el: '#app',
mounted() {
console.log('this Vue instance!')
}
})
会在每一个组件中答应周期中的log,同时里面的方法,类似于vue的prototype添加实例方法一样。
var install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (options) {
// 逻辑...
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
本文标题: vue mixins组件复用的几种方式(小结)
本文地址: http://www.cppcns.com/ruanjian/java/202753.html
mixin机制 vue_vue mixins组件复用的几种方式(小结)相关推荐
- vue 组件通信的几种方式
前言 在vue中, 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还 ...
- Vue.js 定义组件模板的七种方式
转载自 Vue.js 定义组件模板的七种方式 在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式): 字符串 模板字面量 x-template 内联模板 render ...
- 【vue】vue组件传值的三种方式
前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值 引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递 父组件通过 prop 给子组件下发数据,子组件通过事件 ...
- Vue组件通信的五种方式
Vue组件通信的五种方式 文章目录 Vue组件通信的五种方式 一. props/$emit(父子通信) 二. vuex(组件之间通信) 三. 事件总线EventBus(组件之间通信) 四. provi ...
- vue组件通信的几种方式
vue组件通信的几种方式 最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Chil ...
- mixin机制 vue_Vue Mixin用法
一. 介绍 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用. index.vue与mixin.js中的数据,计算属性,方法等将进行合并: 如果两者有相同的数据,index. ...
- React中组件通信的几种方式
首次发表在个人博客 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1. 父组件向子组件通信 React数据流动是单向的,父组件向子组件 ...
- vue中子组件和子组件之间怎么通信_Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用 ...
- Vue 组件间通信几种方式(完整版)
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是 ...
最新文章
- 学机器学习有必要懂数学吗?深入浅出机器学习与数学的关系附教程
- 什么是泛型缓存和静态构造函数?
- C++ cin相关函数总结
- 阻燃防火电缆在数据中心建设中的应用
- 计算机应用基础2010备课,《计算机应用基础》教案——office2010版-(2)
- ubuntu版php开发工具,Ubuntu 中搭建 LAMP 及 php 开发工具
- 解决: cp -rf 命令中参数 -f 失效 ( 依旧要手动确认 )
- Ember.js之动态创建模型
- easyui 常用的属性
- 电子书下载:MySQL Stored Procedure Programming
- hbase 查询某列_hbase shell使用STARTROW、ENDROW、FILTER查出指定的列
- 目标检测(Object Detection)
- ubuntu端口映射
- 用 Opencv 和 Python 对汪星人做模糊检测
- 【华为OD机试真题 JAVA】两数之和绝对值最小
- PDA库存盘点,有效提高电子制造企业库存盘点效率
- HTML页面转PDF导出加水印并解决字被截断的问题
- Windows微信刷朋友圈
- html怎么随机设置颜色,设置随机颜色值
- 分布式网页爬虫系统 设计和实现
热门文章
- sqlite3修改表内容python_Python sqlite3数据库模块使用攻略
- mysql 可以用多个索引_mysql索引合并:一条sql可以使用多个索引
- 背景图层和普通图层的区别_图层样式(一)—高级混合选项
- Java8————Optional
- 用php实现一个简易的web表单生成器,网络编程PHP Web表单生成器案例分析
- bert 中文 代码 谷歌_ELECTRA中文预训练模型开源,110个参数,性能媲美BERT
- mysql获取时间戳_服了!阿里Mysql三位封神专家总结1200多页性能优化的千金良方...
- zenmap nmap输出无显示_双路显示控制仪XME-H80-1616价格报价
- Native Vlan(本征vlan)
- linux文件目录含义,Linux中文件权限目录权限的意义及权限对文件目录的意义