Vue之mixin全局的用法详解

Vue之mixin全局的用法详解

1. 概述

Vue中的mixin(混入)机制可以让组件之间的代码可以进行复用,即在多组件中共用同一段代码,而不用把这段代码写在多个组件里。这对于代码复用、减少冗余代码是一个非常好的解决方案。mixin可以理解为是一种能够让我们将组件的一部分功能提取出来,并进行重复利用的机制。

2. 语法

下面是mixin的语法:

var mixin = {
  data() {
    return {
      name: 'Andy'
    }
  },
  methods: {
    changeName(name) {
      this.name = name;
    }
  }
}

在组件中使用mixin:

var component = {
  mixins: [mixin],
  data() {
    return {
      age: 18
    }
  }
}

*mixin对象中的属性会被混入到所有引用它的组件中,即组件中的$option对象;

*如果组件和mixin中有同名选项,则组件的选项会覆盖mixin的选项;

*如果选项值为对象,则会进行合并操作;

下面是一个完整示例:
var mixin = {
  data() {
    return {
      name: 'Andy',
      age: 18
    }
  },
  computed: {
    fullName() {
      return this.name + ' ' + this.age;
    }
  },
  methods: {
    changeName(name) {
      this.name = name;
    }
  }
}

var component = {
  mixins: [mixin],
  created() {
    console.log(this.fullName); // "Andy 18"
    this.changeName('Lucy');
    console.log(this.fullName); // "Lucy 18"
  }
}

new Vue(component);

3. mixin在Vue中的应用

3.1 mixin的全局属性

我们可以将mixin全局注册,这就意味着其被引用的所有组件都将应用该mixin的选项。

// mixin.js
var mixin = {
  methods: {
    test() {
      console.log('测试方法');
    }
  }
}

export default mixin;

在main.js中全局注册mixin:

import Vue from 'vue';
import mixin from './mixin.js';

Vue.mixin(mixin);

new Vue({
  el: '#app1'
});

new Vue({
  el: '#app2'
});
<div id="app1">
  <button @click="test">测试</button>
</div>

<div id="app2">
  <button @click="test">测试</button>
</div>

在两个不同的Vue实例中,我们都使用了同一段代码test方法。这里test方法已经被全局定义,不需要在每个组件中定义一遍代码,可以避免代码的重复。

3.2 mixin进行选项合并

如果一个组件和一个mixin的选项相同,则组件的选项会覆盖mixin的选项。如果选项值为对象,则会进行合并操作。

var mixin = {
  data() {
    return {
      message: 'mixin中的数据'
    }
  },
  methods: {
    showMessage() {
      console.log('mixin的showMessage方法');
    }
  }
}

var component = {
  data() {
    return {
      message: '组件中的数据'
    }
  },
  methods: {
    showMessage() {
      console.log('组件的showMessage方法');
    }
  },
  mixins: [mixin]
}

如果代码中的组件或mixin都有一个数据属性message和一个方法showMessage,那么 component 选项会覆盖 mixin 的选项。 mixin.showMesssage 的方法会在 component.showMessage 方法前被调用。

4. 总结

通过mixin机制可以实现组件之间的功能复用,避免了代码重复,让代码更加简洁,同时也方便了代码的维护。

可以用全局的方式注册mixin,也可以用局部方式注册。在组件和mixin中有同名选项时,会按照优先顺序进行覆盖,即组件> mixin。

如果选项值为对象,则会进行合并操作。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue之mixin全局的用法详解 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • javascript 面向对象 function类

    下面是关于“JavaScript 面向对象 function 类”的详细讲解。 什么是 JavaScript 面向对象 function 类 在 JavaScript 中,我们可以使用函数(function)来模拟面向对象中的类。这种方式被称为“类式继承”,而被定义的函数则被称为“构造函数”。 使用函数来模拟类,有以下几个优点: 函数可以接收参数,可以很方便…

    JavaScript 2023年5月27日
    00
  • 深入学习jQuery Validate表单验证(二)

    深入学习jQuery Validate表单验证(二) 在上一篇文章中,我们已经了解了如何使用jQuery Validate库进行基本的表单验证。在本篇文章中,我们将进一步学习该库的高级用法。 一、使用自定义规则 除了内置的验证规则之外,我们还可以创建自定义的规则。通过 $.validator.addMethod() 函数,我们可以创建自己的验证规则。 例如,…

    JavaScript 2023年6月10日
    00
  • BootStrap+Mybatis框架下实现表单提交数据重复验证

    首先,我们需要明确一下实现表单提交数据重复验证的基本思路。我们可以在页面上的表单中增加一个校验码字段,每次提交时,先检测校验码,若校验码匹配成功则将表单数据保存至数据库,否则提示用户“数据已存在”。 下面是实现表单提交数据重复验证的完整攻略: 一、创建数据库表 我们可以先创建一个名为user的数据库表,用来存储用户表单提交数据。以下是该表的基本结构: CRE…

    JavaScript 2023年6月10日
    00
  • JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】

    下面是JavaScript求一组数的最小公倍数和最大公约数常用算法的详解。 什么是最小公倍数和最大公约数 在数学中,对于给定的两个或多个整数,最小公倍数是可以被其中的每一个整数整除的最小正整数,最大公约数是可以被两个或多个整数整除的最大正整数。最小公倍数和最大公约数常常用于解决各种数学问题,如分数的化简、幂的约分等等。 算法介绍 最大公约数的求解方法 在求两…

    JavaScript 2023年5月28日
    00
  • JavaScript 解析数学表达式的过程详解

    JavaScript 解析数学表达式的过程详解 什么是数学表达式? 数学表达式是包含算术,代数和其他运算符的数学表达式,通常用来计算结果。 在 JavaScript 中,我们可以使用 eval() 函数来解析和计算一个字符串中的数学表达式。 JavaScript 解析数学表达式的过程 创建一个字符串变量,并且在这个字符串变量中包含一个数学表达式。 let m…

    JavaScript 2023年5月28日
    00
  • js中各种时间格式的转换方法举例

    请看下面的详细讲解。 JS中时间格式的转换方法 日期和时间在我们日常生活中随处可见,在编程中也是一个非常常用的数据类型。JS中有多种表示时间的方式,在不同场景下可能需要使用不同格式的时间。在本篇攻略中,我们将介绍JS中常用的几种时间格式以及相互转换的方法。 JavaScript内置的时间对象 在JS中,有一个内置的时间对象叫做Date对象,它提供了一系列操作…

    JavaScript 2023年5月27日
    00
  • js 在定义的时候立即执行的函数表达式(function)写法

    “js 在定义的时候立即执行的函数表达式(function)写法”也称为IIFE(Immediately Invoked Function Expression)。 IIFE 是一种 JavaScript 函数,它们在定义时会立即执行自己,且不会在全局可见,即不会污染全局作用域。IIFE 最常用的场景是将代码封装在一个作用域中,以防止变量名冲突和代码污染。下…

    JavaScript 2023年5月27日
    00
  • Javascript 面向对象(一)(共有方法,私有方法,特权方法)

    下面是针对”Javascript 面向对象(一)(共有方法,私有方法,特权方法)”的详细讲解: 什么是面向对象编程? 面向对象编程是一种编程思想,它将数据和操作数据的行为封装在一起,形成一种对象。在面向对象编程中,对象都有自己的状态和行为,对象之间通过调用彼此的方法来进行协作完成任务。 在Javascript中,可以使用对象字面量或者构造函数创建对象。对象字…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部