Vue中mixins混入的介绍与使用详解

目录
  • 一、来自官网的描述
  • 二、如何创建Mixins
  • 三、项目中如何使用混入
  • 四、与vuex的区别
  • 五、与公共组件的区别

一、来自官网的描述

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

二、如何创建Mixins

在src目录下创建一个mixins文件夹，文件夹下新建一个myMixins.js文件。前面我们说了mixins是一个js对象，所以应该以对象的形式来定义myMixins，在对象中我们可以和vue组件一样来定义我们的data、components、methods 、created、computed等属性，并通过export导出该对象

export const myMixins = {
components:{},
data(){
return {}
},
created(){},
mounted(){},
computed(){},
methods: {}
}

三、项目中如何使用混入

在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。

你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。

我们可以创建一个目录mixins，在创建一个comment.js文件如图：

1.定义混入对象

common.js 就是我们要混入其它组件的内容：

export default {
	data(){
	return {
      msg: 'erwerwe',
      form:{
        a:'aaa'
      }
    }
	},
	filters: { //过滤器
		numToString(value) {
			return value.toString();
		}
	},
	created(){ //钩子函数
		    console.log('这是混入的组件')
	},
	computed: {   //计算属性
		ids() {
				return  !this.loading
			 }
	},
	methods:{
     exm(){
      console.log('这是混入的exm方法')
      },
     clickFn(){
      console.log(this.msg)
    },
	// 其它属性方法......
		}
}

2.定义使用混入的组件

test.vue组件用mixins把common.js内容混入当前组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1>{{ form.a }}</h1>
    <button @click="buttonClick">current</button>
  </div>
</template>
<script>
//导入js文件
import fun from './mixins/common.js'
export default {
  name: "HelloWorld",
  mixins:[fun],  //混入 fnu对象
  created(){
    console.log('这是当前组件')
  },
  data() {
    return {
      msg: "组件的msg"
    }
  },
  methods:{
    buttonClick(){
      console.log(this.form.a)
      console.log(this.msg)
      this.clickFn();
      this.exm();
    },
    exm(){
      console.log('这是组件的exm方法')
    }
  }
}
</script>

3.存在的问题：

混入的对象中的msg属性，和组件的msg属性冲突，以组件的值优先。组件中没有的属性，混入对象中的生效。

同名钩子函数将会合并成一个数组，都会调用，混入函数先调用

值为对象的选项，如methods，components，directives等，将会合并为一个新对象，如果键名冲突，组件的值优先

四、与vuex的区别

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

五、与公共组件的区别

组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

到此这篇关于Vue中mixins混入的介绍与使用详解的文章就介绍到这了,更多相关Vue mixins混入内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解Vue.js Mixins 混入使用

    Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用. 一.Mixins的基本用法 我们现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:"数据发生变化". 代码实现过程: <!DOCTYPE html> <html lang="en"> <h

  • Vue之Mixins(混入)的使用方法

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被"混合"进入该组件本身的选项. 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行"合并". 比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先. var Mymixin = { data: function(){ return { message: 'hello', foo: 'ab

  • vue中混入mixins的使用方法

    vue中混入mixins的使用方法

    目录 前言 使用方法 总结 前言 Vue中有一个设置项叫做混入 (mixins), 它的使用是用来做代码复用的.同时, 这个mixins 也分为局部混入和全局混入 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项.应用场景 下面先说一下 mixins 的应用场景, 假设现在我们两个组件, 当这两个组件被点击时,

  • Vue混入mixins分发组件可复用功能

    目录 前言 一.后端返回数据与字典数据之前的转换 二.文件下载的混入 三.Element表格最后一行合计数据的混入 前言 那就是说,你可以单独写个逻辑文件,默认导出一个对象,对象里面可以包含data.created.mounted.methods 等vue模板文件中的逻辑对象.接着可以将这个对象引入到多个vue模板中进行功能复用,从而达到功能模块的逻辑封装,便于使用及后期维护. 这里我举一些日常开发中最常用的示例来说,更多的是 methods 的混入. 一.后端返回数据与字典数据之前的转换 通常

  • Vue混入mixins滚动触底的方法

    前言 在app端常常看到类似加载数据的动画,接下来我们来实现滚动触底加载动画提示,以及如何复用这些逻辑. 如何判断滚动触底 来看下几张图: 情况一: 当文档高度还为超过可视区域高度时,不存在滚动,所以也没有滚动触底 情况二: 当文档高度超过可视区域的高度时,还有剩余的文档没有滚动完,也就是说 可视区域高度 + 滚动高度 < 文档高度 ,此时没有达到滚动触底的条件   情况三: 文档高度大于可视区域,并且滚动到文档底部, 也就是说 可视区域高度 + 滚动高度 = 文档高度 判断是否滚动到底 经过上

  • Vue中的混入的使用(vue mixins)

    使用场景: 例如我们在Vue单页面开发的时候当多个组件中都需要下拉刷新,或者使用的都是一个方法的时候,我们就可以使用vue mixins进行封装调用,以及继承,具体看代码. 选项合并 var mixin = { data: function () { return { message: 'hello' } }, created:function(){ console.log('我是mixins中的created') }, methods:{ show:function(num){ console

  • 深入了解Vue.js 混入（mixins）

    混入 (mixins)定义了一部分可复用的方法或者计算属性.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 来看一个简单的实例: var vm = new Vue({ el: '#databinding', data: { }, methods : { }, }); // 定义一个混入对象 var myMixin = { created: function () { this.startmixin() }, methods: { startmix

  • Vue 详解mixins混入用法大全

    Vue 详解mixins混入用法大全

    目录 前言 一.什么是Mixins? 二.什么时候使用Mixins? 三.如何创建Mixins? 四.如何使用Mixins? 五.Mixins的特点 六.Mixins合并冲突 七.与vuex的区别 八.与公共组件的区别 前言 当我们的项目越来越大,我们会发现组件之间可能存在很多相似的功能,你在一遍又一遍的复制粘贴相同的代码段(data,method,watch.mounted等),如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixin

  • vue中的mixins混入使用方法

    目录 作用 使用方法 全局混入 局部混入 作用 用简单的话去概括就是一种分发vue组件中的功能可以复用一个技术,使用这个技术我们可以把需要复用的内容封装成一个vue组件,方便下次使用方便 使用方法 首先在src中去创建一个自己的文件夹,然后把要封装的内容放入到这个文件夹,方便后续的调用 let mymixin={ methods:{ handleBtn(){ alert('封装的内容已经触发!') } } } export default mymixin 全局混入 全局混入就是我们可以把封装好的

  • Vue中mixins混入的介绍与使用详解

    目录 一.来自官网的描述 二.如何创建Mixins 三.项目中如何使用混入 四.与vuex的区别 五.与公共组件的区别 一.来自官网的描述 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 二.如何创建Mixins 在src目录下创建一个mixins文件夹,文件夹下新建一个myMixins.js文件.前面我们说了mixins是一个js对象,所以应该以对象的形式来定义my

  • vue中使用mxgraph的方法实例代码详解

    1.npm 引入 npm install mxgraph --save 2.这个模块可以使用require()方法进行加载.它将返回一个接受对象作为选项的工厂函数.必须将mxBasePath选项提供给工厂函数,而不是将其定义为一个全局变量. var mxgraph = require("mxgraph")( { // 以下地址不需要修改 mxImageBasePath: "./src/images", mxBasePath: "./src" })

  • vue中datepicker的使用教程实例代码详解

    写这个文章主要是记录下用法,官网已经说的很详细了 npm install vue-datepicker --save html代码 <myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> <myDatepicker :date="endtime" :option="timeo

  • Vue中遍历数组的新方法实例详解

    1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key

  • Vue中使用webpack别名的方法实例详解

    在工作中,我们经常会写出这种代码: import MHeader from '../../components/m-header/m-header' @import "../../common/stylus/variable" @import "../../common/stylus/mixin" 即,需要引入公共文件,但是公共文件的文件路径里当前文件很远,那么就会形成上面示例中的那种路径很长的情况. 而因为文件目录是约定俗成的,不可轻易更改,无法修改相对路径.那么

  • vue中{{}},v-text和v-html区别与应用详解

    vue中{{}},v-text和v-html区别与应用详解

    {{}}获取值,不会清空标签原有内容 v-text 获取值,会清空标签原有内容,输出的是纯文本 v-html 获取值,会清空标签原有内容,若数据中包含html标签,将其当html标签解析后输出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <

  • VUE中的mapState和mapActions的使用详解

    最近在开发一套系统,前端使用VUE开发,由于本人是后端开发,前端也会一点,但是VUE接触不多,在VUE项目开发遇到的一些坑记录一下,不是专业前端写好的不好,大家不要唝... 在VUE项目中经常会用到mapState和mapActions,mapState主要用于同步全局的变量或者对象,mapActions主要是用于同步定义的方法,一般两者是结合使用,mapState同步项目中定义的全局的变量或者对象,mapActions是用于变量或者对象为空时,调用方法定义的全局方法获取. mapActions

  • python 中Mixin混入类的使用方法详解

    目录 前言 Mixin 与继承的区别 总结 前言 最近在看sanic的源码,发现有很多Mixin的类,大概长成这个样子 class BaseSanic(    RouteMixin,    MiddlewareMixin,    ListenerMixin,    ExceptionMixin,    SignalMixin,    metaclass=SanicMeta, ): 于是对于这种 Mixin 研究了一下,其实也没什么新的东西,Mixin 又称混入,只是一种编程思想的体现,但是在使用

  • Vue 中的 computed 和 watch 的区别详解

    目录 computed 注意 应用场景 watch 总结 computed computed 看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed 的值在 getter 执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取 computed 的值时才会重新调用对应的 getter 来计算. 1)下面是一个比较经典简单的案例 <template> <div class="hello"> {{ful

  • Vue中watch清除过期副作用的案例详解

    在这里就不过多说watch的用法了,主要了解一下如何清除过期的副作用 通过一个案例来说吧: 一个可搜索的下拉选择器,用户第一次进行搜索的时候网速比较慢,请求虽然被服务端正确响应了,但是数据一直没有传输到客户端,用户看下拉数据没变化 就第二次搜索.第二次搜索之后网速恢复正常了,第二次请求的数据很快就客户端接收且正确渲染:紧接着第一次的数据也被客户端接收且客户端正确渲染. 这样就可能存在这样一种情况,第一次请求,服务端响应了请求但数据还没被客户端接收的时候,有人修改了数据:然后用户又点击刷新,响应数

随机推荐