vue开发抽取组件方式思路

例如如果跳转参数统一的话可以抽取一个方法挂载到vue；

/*** 审批列表跳转* @param {String} name 跳转路由* @param {Object} row 所选数据项* @param {Object} query 其他需要跳转的参数*/
Vue.prototype.$goApproval = function (name, row, query) {this.$router.push({name,query:{dataId: row.id,dataStatus: row.auditStatus,currentAuditNum: row.currentAuditNum,auditNode: row.workflowAuditNode,instId: row.workflowInstId,workflowTaskId: row.workflowTaskId,type: "add",...query},})
};这样就可以在页面统一使用 this.$goApproval() 进行跳转  后面方便统一修改

一般通用的弹窗类型组件可以抽取成一个组件挂载到vue；Vue.extend => Vue 构造器

Vue 基础知识之 Vue.extend - 绅士喵呜 - 博客园

将普通的Vue组件封装成以方法形式调用的组件；

/ ** @param {VueComponent} Component - Vue组件* @param {Object} defaultProps - 默认props* @returns {Function}*/
export function useFunctionComponent(Component, defaultProps) {return function (props = {}) {let _Component = Vue.extend(Component);return new Promise((resolve, reject) => {let vm = new _Component({data: {props: {...defaultProps,...props,},resolve,reject,}});vm.$mount();vm.visible = true;});}
}
/*** 以方法调用组件时，需要混入的属性* 一般都是弹窗类型的组件* @see {@link useFunctionComponent}* @returns {Object} 混入属性*/
export function functionComponentMixins() {return {data() {return {visible: false,props: {},resolve: () => { },reject: () => { }}},watch: {visible(val) {if (val === false) {this.$destroy();}},}}
}

//使用
import Component from './index.vue';
import { useFunctionComponent } from '../../utils/useFunctionComponent';export default useFunctionComponent(Component, Component.data().props)//index.vue
this.resolve(true);

vue开发抽取组件方式思路相关推荐

Vue 开发 UI 组件库
Vue 开发 UI 组件库前言一.开发环境搭建 1.项目初始化 2.开发前准备二.Vue 实现常用组件 1.button 组件 1.1 参数支持 1.2 事件支持 1.3 Button 组件 1 ...
cli3解决 ie11语法错误 vue_从零到一教你基于vue开发一个组件库高性能前端架构解决方案...
Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.虽然笔者有近2年没有从事vue的开发了,但平时一直在关注vue的更新和发展,笔者一直认为技术团队的组件化之路重点在于基础架 ...
npm 编译打包vue_从零到一教你基于vue开发一个组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完徐小夕:如何从0到1教你搭建前端团队的组件系统zhuanlan.zhihu.com 之后很多朋友希望了 ...
Vue 开发的组件库
16款优秀的Vue UI组件库推荐 Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可. 在公司的Web前端项目开发中,多个项目采用 ...
Vue开发登录组件（附下载）
终于搞定了登录组件,省的以后总写了,下次直接加载使用,组件的说明如下,文末有github下载地址,可以去下载,也欢迎大家一起完善,代码开源. 组件开发核心点: Vue基础的那几部分就不多说了,使用Vu ...
Vue 开发 Lov 组件
前端样式开发注意:此 LOV 只限在 FROM 表单中使用,不要再 Table 中使用. 1.开发 LOV 的配置页面页面如下,具体的代码就不在展示了,只是对数据库的增删改查操作. 新增页面如下: ...
038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue 如何处理两个组件异步问题_Vue动态异步组件实现思路及其问题
前言:在vue 官方资料中,我们可以可以很学会如何通过vue构建"动态组件"以及"异步组件",然而,在官方资料中,并没有涉及到真正的"动态异步&quo ...
vue 实例化几种方式_Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...

vue开发抽取组件方式思路

vue开发抽取组件方式思路相关推荐

最新文章

热门文章