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

组件中使用

vue 插件方式引入混入相关推荐

开发Vue插件四种方式
在日常开发中,可能只需要一两个插件就可以完成对系统开发需要.如果引入整个组件库,最后打包项目体积比较大.例如element-ui中的message提示组件等.下面会在vuejs官网提供的插件建议,根据 ...
html引用单文件组件,vue之单文件组件纯网页方式引入
上一节的vue组件开发是把组件内容统一放到了一个js文件里面里面写上模板字符串(引用组件) 这种方式还需要拼接转义写法非常丑陋 vue贴心的帮我们封装了单文件组件可以不用再模板里面拼接字符串下 ...
vue-cli cdn方式引入Vue模块
文章目录 vue-cli cdn 方式引入 Vue 模块前言选择 Vue 的 cdn 如何引入 cdn ? 一手插入一手准备小结 + 打包测试快速配置篇 FAQ 是否需要删除 import ...
Vue引入第三方JavaScript库和如何创建自己的Vue插件
一第三方JavaScript库前言 .vue文件中不解析 script标签引入js文件,只能用 import 引入有两种用法: 1.import a from '-/a' 2.import ' ...
vue项目，引入插件element ui 样式不生效
用vue ui 命令引入插件 element ui 样式不生效步骤一:执行如下命令,安装babel-plugin-component npm install babel-plugin-compon ...
Vue笔记——Vue组件中引入jQuery
Vue笔记--Vue组件中引入jQuery 如果想在普通的HTML页面引入jQuer库的话,直接使用<script src="jQuery.js"></scrip ...
什么是Mixin？带你了解Vue中的Mixin混入
什么是Mixin?本篇文章带大家了解一下Vue中的Mixin混入,介绍Mixin和Vuex的区别,Mixin的使用方法,希望对大家有所帮助! Vue框架现在基本上已经占据了前端的半壁江山,Vue的数据 ...
vue中动态引入图片为什么要是require，你不知道的那些事
相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...
npm file方式引入公共包遇到的几个坑
背景在<前端多个vue项目公共组件的三种方法(推荐npm file引入)>这一篇里讲了npm通过file方式引入公共包的方法,但在实际运用中,会遇到不少坑,这里就讲述笔者遇到的2个问题并 ...

vue 插件方式引入混入

混入(mixin)

插件

数据字典的引入

vue 插件方式引入混入相关推荐

最新文章

热门文章