网站图片优化大小,网站备案幕布,室内设计公司排名一览表,asp网站 没有数据库 管理员密码在 Vue 中#xff0c;混入#xff08;mixin#xff09;是一个强大的功能#xff0c;它能够使得相同代码在不同组件中公用#xff0c;甚至可以将公用代码添加到全局中#xff0c;能够使得开发更加简洁、规范。所谓混入就是将公用的代码#xff0c;混入到不同的组件中。
…在 Vue 中混入mixin是一个强大的功能它能够使得相同代码在不同组件中公用甚至可以将公用代码添加到全局中能够使得开发更加简洁、规范。所谓混入就是将公用的代码混入到不同的组件中。
举一个简单的小例子
// nameMixin.js
export default {data() {return {name: }},methods: {getStartName(){this.name start;},getEndName(){this.name end;}}
}!-- StartName.vue --
tempaltediv{{ name }}/div
/temaplatescript
import nameMixin from ./nameMixin.js;
export default {mixins: [nameMixin],created() {this.getStartName();}
}
/script!-- EndName.vue --
tempaltediv{{ name }}/div
/temaplatescript
import nameMixin from ./nameMixin.js;
export default {mixins: [nameMixin],created() {this.getEndName();}
}
/script如上所示nameMixin.js有一个数据 name和两个获取 name 的方法StartName.vue 和 EndName.vue 都引入并混入了 nameMixin.js那么这两个组件也就都相当于有了 name 数据和两个方法所以可以直接使用和调用。
再说一下全局混入
顾名思义全局混入就是将一段代码混入到全局即所有的组件中。很多插件也都是通过全局混入实现的如 Vuex将 store 混入到了全局。
const install (Vue) {Vue.mixin({data() {return {name: }}beforeCreate() {this.name all;}});
}上面是一段全局混入代码我们将所有的组件混入了一个 name 数据并且在组件创建之前赋予 all 值。
总结
混入有点儿继承的意思就是子继承了父子可以直接调用父的方法或数据。
应用场景 对于那些可能全局公用的方法来说我们可以放到全局混入中就像后端的 BaseController.java 一样可以将一些判断用户权限之类的方法放到全局去公用。 或是将常用的代码提取可公用就比如我写的选择器混入能够规范选择器并且比较好维护
/*** 下拉选择器混入*/
export default {model: {event: input-change, // 这个事件与下面的emit事件与之对应prop: value //},props: {value: {type: String,default: },/*** 监听值改变回调change*/listenValue: Boolean},data() {return {val: this.value,loading: false,options: []}},watch: {value: {handler(n) {this.val n;if (this.listenValue) {this.toChange(n);}}}},methods: {onChange(value) {this.$emit(input-change, value);if (!this.listenValue) {this.toChange(value);}},toChange(value) {if (this.dataKey this.options) {const data this.options.find(item String(item[this.dataKey]) value);this.$emit(change, data);}}}
}
