600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > vue 插件方式引入混入

vue 插件方式引入混入

时间:2021-05-07 08:12:58

相关推荐

vue 插件方式引入混入

混入(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)

组件中使用

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。