混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
全局混入
使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"
// 混入全局验证
Vue.mixin({
created: function () {
// 统一追加验证规则,全空格验证不通过
if (this.$data && this.$data.rules) {
for (let o in this.$data.rules) {
let rule = { pattern: /(\S)/, message: '此项不能为空', trigger: 'blur' }
this.$data.rules[o].push(rule);
}
}
}
})
本文链接地址: vue混入element ui全局追加表单验证规则