vue中mixin的使用详解

  混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”

进入该组件本身的选项。

组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立。

而mixins则是在引入组件之后,则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了。

作用:多个组件可以共享数据和方法,在使用mixin的组件中引入后,mixin中的方法和属性也就并入到该组件中,可以直接使用。钩子函数会两个都被调用,mixin中的钩子首先执行。

下面来介绍一下mixin的具体用法:

1.定义一个mixin.js文件

2.在vue文件中使用mixin

vue中mixins(混入)的用法的更多相关文章

  1. vue中mixins的使用方法和注意点(详)

    mixins基础概况 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使 ...

  2. vue中mixins的理解及应用

    vue中mixins的理解及应用 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...

  3. 详解Vue中watch的高级用法

    我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码: <div> <p>FullName: {{fullName} ...

  4. vue 中 命名视图的用法

    今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...

  5. Vue中Mixins使用

    mixins是一种分发Vue组件中可复用功能的一种灵活方式. mixins是一个JavaScript对象,可以包含组件中的任意选项,比如Vue实例中生命周期的各个钩子函数,也可以是data.compo ...

  6. vue中的混入

    数据对象合并 数据对象在内部会进行浅合并 (一层属性深度),在和组件的数据发生冲突时以组件数据优先 var mixin = { data() { return { msg_mixins: 'mixin ...

  7. Vue.js Mixins 混入使用

    Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重 ...

  8. Vue中mixins、extends、extend和components的作用和区别

    关于mixins:官方文档: https://cn.vuejs.org/v2/guide/mixins.html 一.components Vue.component是用来注册或获取全局组件的方法,其 ...

  9. vue中watch的详细用法

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法: <input type="text" v-model=&quo ...

随机推荐

  1. 如何使用netlify部署vue应用程序

    什么是Netlify? Netlify是一个现代网站自动化系统,其JAM架构代表了现代网站的发展趋势.所谓JAM,就是指基于客户端JavaScript.可重用API和预构建Markup标记语言的三者结 ...

  2. go使用JWT进行跨域认证最全教学

    JWT前言 JWT是JSON Web Token的缩写.JWT本身没有定义任何技术实现,它只是定义了一种基于Token的会话管理的规则,涵盖Token需要包含的标准内容和Token的生成过程. JWT ...

  3. 洛谷P4638 SHOI2011 银行 ( 最大流)

    类似题目(一模一样):http://poj.org/problem?id=1149 我这里以poj1149的PIGS为例, 新建源点s和汇点t,n个顾客作为中间的点,,对于每个顾客,他可以解锁一定的猪 ...

  4. 洛谷P1438 无聊的数列 (线段树+差分)

    变了个花样,在l~r区间加上一个等差数列,等差数列的显著特点就是公差d,我们容易想到用线段树维护差分数组,在l位置加上k,在l+1~r位置加上d,最后在r+1位置减去k+(l-r)*d,这样就是在差分 ...

  5. 第一个Spring Boot的MVC程序

    最近在学习Spring Boot,记录一下学习过程!!!! Spring Boot中的MVC:M(model模型),C(controller控制器),V(view视图) model:是Java的实体B ...

  6. EF在二手市场中的使用

    二手市场这个小项目是我第一次用EF,边学边写边记录吧 首先明确几个知识点 存储过程 存储过程简单来说,就是为以后的使用而保存的一条或多条SQL语句的集合.可将其视为批件,虽然它们的作用不仅限于批处理. ...

  7. 萌新也能看懂的KMP算法

    前言 算法是什么?算法就是数学规律.怎么去总结和发现这个规律,就是理解算法的过程. KMP算法的本质是穷举法,而并不是去创造新的匹配逻辑. 以下将搜寻的字符串称为子串(part),以P表示.被搜寻的字 ...

  8. Failed to convert from type [java.lang.String] to type [java.util.Date] for value '2020-02-06'; nested exception is java.lang.IllegalArgumentException]解决

    今天做springbook项目前端输入日期传到数据库保存报了一下错误 Whitelabel Error Page This application has no explicit mapping fo ...

  9. 分支结构中的if-else(条件判断结构)

    一.三种结构 第一种: if(条件表达式){ 执行表达式}第二种:二选一 if(条件表达式){ 执行表达式1}else{ 执行表达式2}第三种:n选一 if(条件表达式){ 执行表达式1}else i ...

  10. Python基础部分:10、数据类型的内置方法和字符编码

    目录 一.数据类型内置方法 1.字典dict内置方法 1.1.类型转换 2.字典必须要掌握的方法 2.1.取值方式 2.2.修改内部数据值 2.3.删除数据 2.4.统计字典中键值对个数 2.5.字典 ...