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. [SPDK/NVMe存储技术分析]008 - RDMA概述

    毫无疑问地,用来取代iSCSI/iSER(iSCSI Extensions for RDMA)技术的NVMe over Fabrics着实让RDMA又火了一把.在介绍NVMe over Fabrics ...

  2. hutool包里的ObjectUtil.isNull和ObjectUtil.isEmpty的区别

    大家都用过hutool包把,包路径为:cn.hutool.core.util,最近再使用的过程中一直没高明白ObjectUtil.isEmpty和ObjectUtil.isNull两者到底有那些区别, ...

  3. 写fstable

    mountpoint 就是挂载点./. /usr. swap 都是系统安装时分区的默认挂载点. 如果你要挂载一个新设备,你就要好好想想了,因为这个新设备将作为文件系统永久的一部分,需要根据FSSTND ...

  4. JavaScript 里的 'this' 的一般解释

    本文旨在帮助自己和大家理解 JS 里的 this, 翻译.整理并改写自本人关注的一个博主 Dmitri Pavlutin,原文链接如下: https://dmitripavlutin.com/gent ...

  5. idea执行maven命令的三种方式

    前言: java开发的IDE工具idea默认会提供maven生命周期的图形化执行,但是如果我们需要定制化的执行命令的时候,就需要使用手动执行maven命令的方式,今天就和大家讲一下idea手动执行ma ...

  6. Dubbo 配置文件是如何加载到 Spring 中的？

    Spring 容器在启动的时候,会读取到 Spring 默认的一些 schema 以及 Dubbo 自 定义的 schema,每个 schema 都会对应一个自己的 NamespaceHandler, ...

  7. rabbitmq有哪些重要角色和组件？

    rabbitmq有哪些重要角色? 生产者:消息的创建者,负责创建和推送数据到消息服务器 消费者:消息的接收方,用于处理数据和确认消息 代理:就是RabbitMQ本身,用于扮演快递的角色,本身并不生产消 ...

  8. Java语言的特点有哪些？

    1.简单 Java最初是为对家用电器进行集成控制而设计的一种语言,因此它必须简单明了.Java语言的简单性主要体现在以下三个方面: 1) Java的风格类似于C++,因而C++程序员是非常熟悉的.从某 ...

  9. TCP（三）

    1.三次握手 置位概念:根据TCP的包头字段,存在3个重要的标识ACK.SYN.FIN ACK:表示验证字段 SYN:位数置1,表示建立TCP连接 FIN:位数置1,表示断开TCP连接 三次握手过程说 ...

  10. ElasticSearch-学习笔记04-复杂查询

    service package com.huarui.service; import com.huarui.entity.SearchEntity; import com.huarui.exectio ...