vue中混入mixin的应用实例

　　介绍

这篇文章主要介绍了vue中混入mixin的应用实例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

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

即混合在引入组件之后,会将组件内部的内容如数据、方法等属性与父组件相应内容进行合并。相当于在引入后,父组件的各种属性方法都被扩充了。

比如在两个不同的组件的组件中调用sayHi方法,需要重复定义,倘若方法比较复杂,代码将更加冗余,但使用mixin就相对比较简单了。

首先在mixin。js文件中定义一个混入对象:

let  mixin =, { 　　data 才能;(),{ 　　,,,return  { 　　,,,,,用户名:,& # 39;mixin # 39; 　　,,,} 　　,,}, 　　created 才能;(),{ 　　,,,this.sayHello () 　　,,}, 　　方法:才能,{ 　　,,,sayHello  (), { 　　,,,,,console.log (“$ {this.userName},,欢迎”) 　　,,,} 　　,,} 　　} 　　 　　export  default  mixin

然后定义两个组件,分别在组件中引入:

& lt; script> 　　,,,import  mixin 得到& # 39;. ./mixin # 39; 　　 　　,,,export  default  { 　　,,,,,mixin:,(混合) 　　,,,} 　　& lt;/script>

则两个组件的打印结果都为:

vue中混入mixin的应用实例

如果在两个组件数据中定义了各自的用户名,则打印结果会引用各自组件中的用户名

如果在两个组件的方法中重复定义了相同的方法,则mixin中的方法会被覆盖

给其中一个组件定义自己的用户名和sayHi方法:

& lt; script> 　　,,,import  mixin 得到& # 39;. ./mixin # 39; 　　 　　,,,export  default  { 　　,,,,,mixin:,(混合) 　　,,,,,数据(),{ 　　,,,,,,,return  { 　　,,,,,,,,,用户名:,& # 39;BComponent& # 39; 　　,,,,,,,} 　　,,,,,}, 　　,,,,,created  (), { 　　,,,,,,,,,this.sayHello () 　　,,,,,}, 　　,,,,,方法:,{ 　　,,,,,,,sayHello  (), { 　　,,,,,,,,,console.log(“嗨,,$ {this.userName}”) 　　,,,,,,,} 　　,,,,,} 　　,,,} 　　& lt;/script>

则打印结果:

vue中混入mixin的应用实例

这有点像注册了一个vue公共方法,可以在多个组件中使用。还有一点类似于在原型对象中注册方法,并且可以定义相同函数名的方法进行覆盖。

混入也可以进行全局注册,但一般情况下不会全局使用,因为会污染vue实例。

我一般在项目中会这样用,比如在多个组件中有用到通用选择器,选项是:是,否,可以使用混合来添加一个统一的字典项过滤器,来实现选项的回显。

1。首先创建一个字典。js文件,用于保存字典项对应的含义,并将其暴露出去:

export  const  COMMON_SELECT =, ( 　　,,,{,代码:0,,标签:,& # 39;是& # 39;}, 　　,,,{,代码:1,标签:,& # 39;否& # 39;} 　　];

注:此处创建的字典。js文件,也可以在页面渲染的时候拿来循环选项,具体代码如下:

import  {, COMMON_SELECT },得到& # 39;. ./常量/Dictionary.js& # 39; 　　 　　export  default  { 　　,,,的数据(),{ 　　,,,,,,,return  { 　　,,,,,,,,,,,comSelectOptions: COMMON_SELECT 　　,,,,,,,} 　　,,,} 　　} 　　 　　& lt; select  v型=皊elStatus"祝辞 　　,,,& lt; el-option  v=癷tem  comSelectOptions",拷贝:关键=癷tem.code",:标签=癷tem.label",: value=https://www.yisu.com/zixun/" item.code "> 　　

2。然后再创建一个过滤器。js文件,保存自定义的过滤函数:

import  {, COMMON_SELECT },得到& # 39;. ./常量/Dictionary.js& # 39; 　　 　　export  default  { 　　,,过滤器:{ 　　,,,comSelectFilter:,(值),=祝辞,{ 　　,,,,,const  target =, COMMON_SELECT.filter (item =祝辞,{ 　　,,,,,,,return  item.code ===,价值 　　,,,,,}) 　　,,,,,return  target.length  ?,目标[0].label :价值 　　,,,} 　　,,} 　　}

3。最后在主。js中一次性引入过滤方法:

import  filter 得到& # 39;。/混合/过滤器# 39; 　　Vue.mixin(过滤器)

vue中混入mixin的应用实例