Mixins一般有两种用途：

1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。

2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

一、Mixins的基本用法

我们现在有个数字点击递增的程序，假设已经完成了，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”.

代码实现过程:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="../assets/js/vue.js"></script>

    <title>Mixins Option Demo</title>

</head>

<body>

    <h1>Mixins Option Demo</h1>

    <hr>

    <div id="app">

        <p>num:{{ num }}</p>

        <P><button @click="add">增加数量</button></P>

    </div>

    <script type="text/javascript">

        //额外临时加入时，用于显示日志

        var addLog={

            updated:function(){

                console.log("数据放生变化,变化成"+this.num+".");

            }

        }

        var app=new Vue({

            el:'#app',

            data:{

                num:1

            },

            methods:{

                add:function(){

                    this.num++;

                }

            },

            mixins:[addLog]//混入

        })

    </script>

</body>

</html>

二、mixins的调用顺序

从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。

在上边的代码的构造器里我们也加入了updated的钩子函数：

1 updated:function(){

2       console.log("构造器里的updated方法。")

3 },

mixins数据放生变化,变化成2.

构造器里的updated方法。

三、全局API混入方式

我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：

1 Vue.mixin({

2

3     updated:function(){

4         console.log('我是全局被混入的');

5     }

6 })

PS：全局混入的执行顺序要前于混入和构造器里的方法。

Vue.js Mixins 混入使用的更多相关文章

  1. vue.js mixins 使用

    export default { data () { return { } }, created () { }, methods: { arrayContain (array, obj) { for ...

  2. 使用vue的mixins混入实现对正在编辑的页面离开时提示

    mixins.ts import { Vue, Component, Watch } from "vue-property-decorator" Component.registe ...

  3. 小技巧|使用Vue.js的Mixins复用你的代码

    Vue中的混入 mixins 是一种提供分发 Vue 组件中可复用功能的非常灵活的方式.听说在3.0版本中可能会用Hooks的形式实现,但这并不妨碍它的强大. 这里主要来讨论 mixins 如何优化我 ...

  4. vue.js过度&动画、混入&插件

    1.vue  过度动画 1.过度 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件. 语法格式: < ...

  5. Vue.js 2.x 混入

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

  6. Vue mixins(混入)

    建立一个公共组件,然后对该组件进行混入继承. 注意会走两个生命周期,谨慎使用 mixins混入,相当于生成new 组件:组件引用,相当与在父组件内开辟了一块单独的空间 mixins适用于,两个有非常相 ...

  7. _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用

    _ 下划线 vue mixins 混入 变量前有下划线 变量不起作用

  8. Vue.js之组件系统

    vue.js既然是框架,那就不能只是简单的完成数据模板引擎的任务,它还提供了页面布局的功能.本文详细介绍使用vue.js进行页面布局的强大工具,vue.js组件系统. Vue.js组件系统 每一个新技 ...

  9. （12）打鸡儿教你Vue.js

    组件 语法格式如下: Vue.component(tagName, options) <tagName></tagName> <div id="app" ...

随机推荐

  1. web测试知识点整理

    web是如何测试的? 1. 通用功能测试和可用性测试 2. 性能测试和安全性测试 3. 兼容性测试 4. 数据库和稳定性测试等 web功能测试怎么测? 从一下几个方面来进行WEB测试: 1. 链接测试 ...

  2. FOC中的电流采样

    电流采样是FOC的基础,具体有电流传感器采样.电阻采样,电阻采样以其简单低成本的应用广泛使用. 电阻法采样有单电阻采样.双电阻采样.三电阻采样. 一． 单电阻采样 单电阻采用分时采样,在一个PWM周期 ...

  3. Nextcloud fpm 版在 Dokcer 下安装踩坑

    安装 首先到 https://registry.hub.docker.com/_/nextcloud 获取 Nextcloud 的示例 docker-compose version: '2' volu ...

  4. 知识点简单总结——Lyndon分解

    知识点简单总结--Lyndon分解 Lyndon串 定义:一个字符串的最小后缀就是整个串本身. 等效理解:这个串为其所有循环表示中最小的. Lyndon分解 定义:将字符串分割为 $ s_{1} s_ ...

  5. 玩转SpringBoot之定时任务@Scheduled线程池配置

    序言 对于定时任务,在SpringBoot中只需要使用@Scheduled 这个注解就能够满足需求,它的出现也给我们带了很大的方便,我们只要加上该注解,并且根据需求设置好就可以使用定时任务了. 但是, ...

  6. Windows&Linux文件传输方式总结

    在渗透过程中,通常会需要向目标主机传送一些文件,来达到权限提升.权限维持等目的,本篇文章主要介绍一些windows和Linux下常用的文件传输方式. Windows 利用FTP协议上传 在本地或者VP ...

  7. Adobe AIR 应用程序图标详细描述

    官方PDF文档: http://help.adobe.com/zh_CN/air/build/WS901d38e593cd1bac1e63e3d129907d2886-8000.html#WS901d ...

  8. 什么是ORM思想？常用的基于ORM的框架有哪些？各有什么特点？

    ORM的全称是Object-Relational Mapping,即对象关系映射.ORM思想的提出来源于对象与关系之间相悖的特性.我们很难通过对象的继承与聚合关系来描述数据表中一对一.一对多以及多对多 ...

  9. spring源码-扩展点

    /** * @Author quan * @Date 2020/11/13 * 扩展原理 * BeanPostProcessor bean后置处理器,bean创建对象初始化前后进行拦截工作 * * * ...

  10. 什么是 rabbitmq ?

    采用 AMQP 高级消息队列协议的一种消息队列技术,最大的特点就是消费并不需 要确保提供方存在,实现了服务之间的高度解耦