vue中mixin用法,vue中mixins使用场景
本文主要介绍对vue中mixin的理解和应用。对vue感兴趣的同学可以参考一下。
Mixin提供了一种非常灵活的方式来在Vue组件中分发可重用的功能。混合对象可以包含任何组件选项。当组件使用混合对象时，混合对象的所有选项都将“混合”到组件本身的选项中。
即mixin引入组件后，会将组件的内部内容，如数据、方法等，与父组件的相应内容进行合并。相当于引入后，扩展了父组件的各种属性方法。
例如，在两个不同的组件中调用sayHi方法需要重复定义。如果方法很复杂，代码会更冗余，但是使用mixins相对简单。
首先，在mixin.js文件中定义一个混合对象：
let mixin={
data () {
返回{
用户名：“mixin”
}
},
已创建(){
this.sayHello()
},
方法：{
说你好(){
console.log(`${this.userName}，欢迎`)
}
}
}
导出默认混音
然后定义两个组件，分别引入到组件中：
脚本
从导入混音./混合
导出默认值{
mixins: [mixin]
}
/脚本
那么两个组件的打印结果是：
如果在两个组件的数据中定义了各自的用户名，则打印结果将引用各自组件中的用户名。
如果在两个组件的方法中重复定义同一个方法，mixin中的方法将被覆盖。
为其中一个组件定义您自己的用户名和sayHi方法：
脚本
从导入混音./混合
导出默认值{
mixins: [mixin]，
data() {
返回{
用户名：“b组件”
}
},
已创建(){
this.sayHello()
},
方法：{
说你好(){
console.log(`嗨，${this.userName} `)
}
}
}
/脚本
然后打印结果：
这有点像注册一个vue公共方法，可以在多个组件中使用。还有一点类似于在prototype对象中注册一个方法，你可以用相同的函数名定义一个方法来覆盖它。
也可以全局注册，但是一般不会全局使用，因为会污染vue实例。
我通常在项目中使用这个。例如，通用选择器用于多个组件。选项有：是、否，可以使用mixin添加统一的字典项过滤器，实现选项的呼应。
1.首先创建一个Dictionary.js文件，用来保存字典项的对应含义，并将其公开：
export const COMMON_SELECT=[
{代码：0，标签:“是”}，
{代码：1，标签:否 }
];
注意：这里创建的Dictionary.js文件也可以在页面呈现时用作循环选项。具体代码如下：
从导入{ COMMON_SELECT }./constants/Dictionary.js
导出默认值{
data() {
返回{
comSelectOptions: COMMON_SELECT
}
}
}
选择垂直模式=selStatus
El-option v-for= item in comSelectOptions :key= item . code :label= item . label :value= item . code /El-option
/选择
2.然后创建一个filter.js文件并保存自定义过滤器函数：
从导入{ COMMON_SELECT }./constants/Dictionary.js
导出默认值{
过滤器：{
comSelectFilter: (value)={
const target=COMMON _ select . filter(item={
返回item.code===value
})
返回目标。长度？目标[0]。标签:值
}
}
}
3.最后，在main.js中一次性引入了filter方法：
从导入筛选器。/混合/过滤
过滤程序
哦，这样我们可以在任何组件中自由使用它。
模板
差异
.
{{ status comSelectFilter }}
.
/div
/模板
以上是讨论mixin在vue中应用的细节。更多mixin在vue中的应用，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。