mixins

  混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。 
  混合对象可以包含任意组件选项。 
  当组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项。

例子

  新建一个 base.js 文件用于定义混合对象:

// base.js
export const mixin = {
created: function () {
console.log('混入对象的钩子被调用')
},
methods: {
foo(){
console.log('foo');
},
conflicting(){
console.log('from mixin');
}
}
}

在 App.vue 组件中使用混合对象:

// App.vue
<template>
<!-- ... -->
</template>
<script>
import {mixin} from "./base.js"; // 导入混合对象 export default {
mixins: [mixin], // 记得一定要添加 mixins 属性,要求赋值一个数组,意味着可以使用多个混合对象
// ...
created:function(){
console.log('组件钩子被调用')
this.foo();
this.conflicting();
},
method: {
conflicting(){
console.log("from self");
}
}
}
</script>

要点

1、当组件和混入对象含有同名选项时,这些选项将以恰当的方式混合–数据对象在内部会进行浅合并 (一层属性深度)。

2、混入对象在和组件的数据发生冲突时以组件数据优先。
3、同名钩子函数将混合为一个数组,因此都将被调用
4、混入对象的钩子将在组件自身钩子之前调用。
5、值为对象的选项,例如 methods, components 和 directives,将被混合为同一个对象。两个对象键名冲突时,取组件对象的键值对。

实际应用 

混合对象的使用主要是在项目中提取出常用的公共方法,提高代码的重用率。

vue的混合mixins学习的更多相关文章

  1. vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)

    一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

  2. Vue混合mixins

    前面的话 本文将详细介绍Vue混合mixins 概述 混合 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选 ...

  3. Vue中的“混合”——mixins使用方法

    混合是一种灵活的分布式复用 Vue 组件的方式.混合对象可以包含任意组件选项.以组件使用混合对象时,所有混合对象的选项将被混入该组件本身的选项.当组件和混合对象含有同名选项时,这些选项将以恰当的方式混 ...

  4. node+vue进阶【课程学习系统项目实战详细讲解】打通前后端全栈开发(1):创建项目,完成登录功能

    第一章 建议学习时间8小时·分两次学习      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章]) 视频教程地 ...

  5. 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架(asp.net core 2.X+Vue)模板项目学习之路(一) C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布,并能正常访问

    中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...

  6. SASS详解之混合(mixins)

    SASS详解之混合(mixins)可以出现在SASS的任何地方.有很多类名具有相同或者相似的样式,就可以用SASS中的混合(mixins)来进行编写,然后针对不同类名的不同样式逐一编写. 定义一个混合 ...

  7. 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3):用户添加/修改/删除 vue表格组件 vue分页组件

    第三章 建议学习时间8小时      总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...

  8. vue散碎知识点学习

    1. vue散碎知识点学习 1.1. 特点 数据渲染/数据同步 组件化/模块化 其他功能路由,ajax,数据流 1.2. Vue.js学习资源 vuejs中文官网:http://cn.vuejs.or ...

  9. [MAUI] 在.NET MAUI中结合Vue实现混合开发

    ​ 在MAUI微软的官方方案是使用Blazor开发,但是当前市场大多数的Web项目使用Vue,React等技术构建,如果我们没法绕过已经积累的技术,用Blazor重写整个项目并不现实. Vue是当前流 ...

随机推荐

  1. noip2011 玛雅游戏 大模拟

    深搜+模拟 需要剪枝:同一移动向右移了就不需要向左移了 #include<cstdio> #include<cstring> #include<iostream> ...

  2. BZOJ_1251_序列终结者

    BZOJ_1251_序列终结者 [问题描述] 给定一个长度为N的序列,每个序列的元素是一个整数(废话).要支持以下三种操作: 1. 将[L,R]这个区间内的所有数加上V. 2. 将[L,R]这个区间翻 ...

  3. BZOJ_1026_[SCOI2009]windy数_数位DP

    BZOJ_1026_[SCOI2009]windy数_数位DP 题意:windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之 ...

  4. BZOJ_1485_[HNOI2009]有趣的数列_卡特兰数

    BZOJ_1485_[HNOI2009]有趣的数列_卡特兰数 Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ ...

  5. 实现自动SSH连接

    #!/usr/bin/expect set timeout 10 set username [lindex $argv 0] set password [lindex $argv 1] set hos ...

  6. 正则表达式(Regular expressions)使用笔记

    Regular expressions are a powerful language for matching text patterns. This page gives a basic intr ...

  7. TensorFlow之DNN(二):全连接神经网络的加速技巧(Xavier初始化、Adam、Batch Norm、学习率衰减与梯度截断)

    在上一篇博客<TensorFlow之DNN(一):构建“裸机版”全连接神经网络>中,我整理了一个用TensorFlow实现的简单全连接神经网络模型,没有运用加速技巧(小批量梯度下降不算哦) ...

  8. OsharpNS轻量级.net core快速开发框架简明入门教程-从零开始启动Osharp

    OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...

  9. 我眼中的 Nginx(六):深入 Nginx/Openresty 服务里的 DNS 解析

    张超:又拍云系统开发高级工程师,负责又拍云 CDN 平台相关组件的更新及维护.Github ID: tokers,活跃于 OpenResty 社区和 Nginx 邮件列表等开源社区,专注于服务端技术的 ...

  10. .Net开发者必知的技术类RSS订阅指南

    目录 RSS订阅资源 .Net基金会 MSDN中文版 杂志 微软 Github 系列 微软DevBlog系列 InfoQ中文版系列 如何找到大佬的 Twitter/Youtube/Stackoverf ...