您现在的位置是:网站首页> 编程资料编程资料
Vue混入与插件的使用介绍_vue.js_
2023-05-24
338人已围观
简介 Vue混入与插件的使用介绍_vue.js_
1. 混入
概述:
混入(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
简单来说,混入用于公共代码复用。
混入分为:全局和局部。
混入的执行顺序:
{{name}}
{{showName}}
{{run()}}

注意:
- 混入的配置,可以把几乎所有new Vue配置中的所有配置都能混入,但是el配置它不可以混入
- data配置,在混入方式中,只能写函数的方式,且函数一定要返回一个对象,混入可能被调用多次,如果直接是对象的话,就会有污染(调用多次,引用地址却不变,实例之间调用时不会互相影响)
- data混入的优先级(对象属性) 组件(实例) > 局部 > 全局 => 只会调用一个
- 生命周期方法,执行顺序 全局 -> 局部 --> 组件(实例) 依次执行
- 方法依次执行,属性对应的配置只执行一次,data是例外
2. 插件
概述:
在vue中提供插件机制,可以通过它的要求来完成插件的封装,运用到项目中
语法:
Vue.use(函数|类|对象,[可选参数])
// 函数 // 函数名称 plugin 可以更换 function plugin(Vue类,options可选参数){} // 类 class Plugin { // 必须是静态方法,且名称必须为install static install(Vue类,options可选参数){} } // 调用静态属性:Plugin.install(Vue类,options可选参数) // 对象 const obj = { // 属性名称必须为 install install(Vue类,options可选参数){} }案例:
{{title}}

插件封装成类:
{{title}}
插件封装成对象:
{{title}}
到此这篇关于Vue混入与插件的使用介绍的文章就介绍到这了,更多相关Vue混入与插件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
相关内容
- JS网页repaint与reflow 的区别及优化方式_JavaScript_
- Vue网络请求的三种实现方式介绍_vue.js_
- React中编写CSS实例详解_React_
- vue中手动封装iconfont组件解析(三种引用方式的封装和使用)_vue.js_
- 在vue项目中(本地)使用iconfont字体图标的三种方式总结_vue.js_
- 在线使用iconfont字体图标的简单实现_vue.js_
- Fabric.js 修改画布交互方式作用详解_JavaScript_
- JavaScript第七种数据类型Symbol的用法详解_javascript技巧_
- axios中如何进行同步请求(async+await)_vue.js_
- vue与electron实现进程间的通信详情_vue.js_
