混入(mixin)
混入提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项,当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。推荐将其作为插件发布,以避免重复应用混入。
钩子函数合并
同名钩子将混合为一个数组,因此都将被调用。混入对象的钩子函数在组件自身钩子函数之前调用。数据对象合并
数据对象在内部会进行递归合并,在发生冲突时以组件数据优先。普通方法合并
当混合值为对象的选项时,例如methods、components、directive,将被混合为同一个对象,两个对象键名冲突时,取组件对象的键值对。
插件
插件通常用来为vue添加全局功能。
使用插件
通过全局方法Vue.use()使用插件,它需要在调用new Vue()启动应用之前完成:
// 调用 `MyPlugin.install(Vue)`Vue.use(MyPlugin)new Vue({// ...组件选项})
开发插件
Vue.js的插件应该暴露一个install方法,这个方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象
数据字典的引入
整体结构:
数据字典来源
在resource.js中,导出数据:
const baseDict = {dataStatus:{0:'待触发',1:'执行中',2:'已完成'},taskStatus:{0: '审核中',1: '已发布',2: '未通过',}}export default {...baseDict}
dict类处理
dict.js中,创建类Dict
import resource from './resource'export default class Dict {constructor(dict){this.dict = dict}init(dicts,Vue){if(dicts && dicts instanceof Array){dicts.forEach(item => {Vue.set(this.dict,item,resource[item])})}}}
创建插件,使用mixin
在index.js中,导出插件
import Dict from './dict'let dictPlugin = {}dictPlugin.install = function(Vue) {Vue.mixin({data(){return{dict:{}}},created(){new Dict(this.dict).init(this.$options.dicts,Vue)}})}export default dictPlugin
引入插件
main.js中,使用插件:
import dictPlugin from './components/Dict'Vue.use(dictPlugin)
组件中使用