vue中mixins的工具的封装方式

目录
  • mixins工具的封装
    • vue的mixins的工具是什么?
    • js工具代码
    • 三、使用这个文件
  • vue组件封装及注意事项
    • 调用的时候
    • 我们已经会使用 父组件向子组件传数据了,那子组件如何来修改父组件的数据呢?

mixins工具的封装

vue的mixins的工具是什么?

就是我们再写信息管理系统时,涉及到大量的增删查改调用后台接口的重复的方法,我们可以把这些方法集合起来直接作为一个js文件,后面可以直接引入,数据和方法都不需要声明,直接使用即可。

再概括一下,就是请求后台接口的方法的集合。

js工具代码

具体注释我会直接写在代码里,然后大家可以自己直接对照着代码看

代码如下:

//这里引入了qs,使用npm install qs就可进行安装,在后面下载的方法里用到(get方法拼接参数),
//如果没有这个需求,可以不引入(同时注意删除下方的下载方法)
import qs from 'qs'
export default {
  data() {
    return {
    //这个mixinViewModuleOptions需要在使用这个工具的时候在vue文件的data中声明
      mixinViewModuleOptions: {
        mockData: null,
        getDataListURL: '', // 数据列表接口 API地址
        activatedIsNeed: true, // 此页面是否在激活(进入)的时候,调用查询数据列表接口
        queryDataURL: '', // table查询接口
        deleteURL: '', // 删除接口
        downLoadURL: '', // 下载接口
        deleteIsBatch: false, // 是否批量删除
        deleteIsBatchKey: 'id', // 删除接口,批量状态下有那个key进行标记操作,比如 pid,uid
        // getDataListIsPage: true // 不同的数据接口,返回的数据接口不相同,用次变量来区别
      },
      dataForm: {}, // 查询条件
      dataList: [], // 数据列表
      page: 1, // 当前页码
      rows: 10, // 每页数
      total: 0, // 总条数
      dataListLoading: false, // 数据列表,loading状态
      dataListSelections: [], // 数据列表,多选项
      addOrUpdateVisible: false, // 新增/更新,弹窗visible状态
    }
  },
  created() {
    if (this.mixinViewModuleOptions.activatedIsNeed) {
     //获取数据的方法
      this.getDataList()
    }
  },
  methods: {
    // 下载excel
    downLoadHandle(id) {
      if (!this.dataList.length) {
        return this.$message.warning('没有可导出的数据')
      }
      if (!id) {
        return this.$message.warning('id字段无效错误')
      }
      const ids = this.dataListSelections.map(a => a[id]).join(',')
      //最开始引入的qs在这里用到,作用:将dataForm这个对象用‘&'拼接成字符串,再拼到下载链接后
      const dataForm = qs.stringify(Object.assign({}, this.dataForm, { ids }))

      const url = `${window.SITE_CONFIG.BASE_URL.serverIP}${this.mixinViewModuleOptions.downLoadURL}?${dataForm}`
      window.open(url)
    },
     // 删除
    deleteHandle(id) {
      if (!id && this.mixinViewModuleOptions.deleteIsBatch
      && this.dataListSelections.length <= 0) {
        return this.$message({
          message: '请选择删除项',
          type: 'warning',
          duration: 800,
        })
      }
      this.$confirm('您确定删除此条内容么', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let ids = ''
        if (this.dataListSelections.length) {
          ids = this.dataListSelections.map(item =>
          `${item[this.mixinViewModuleOptions.deleteIsBatchKey]}`).join(',')
        } else {
          ids = id
        }
        this.$http.get(`/${this.mixinViewModuleOptions.deleteURL}`, {
          params: {
            id: ids,
          },
        }).then(({ data }) => {
          if (data.code !== 1) {
            return this.$message.error(data.msg)
          }
          this.$message({
            type: 'success',
            message: '删除成功!',
            duration: 800,
            onClose: () => {
              this.getDataList()
            },
          })
        })
      }).catch(() => {
      })
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.init()
      })
    },
    dataListSelectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 查询
    queryHandle() {
      this.page = 1
      this.getDataList()
    },
    // 获取table数据
    getDataList() {
      this.dataList = []
      this.dataListLoading = true
      return this.$http.get(`/${this.mixinViewModuleOptions.getDataListURL}`, {
        params: {
          page: this.page,
          rows: this.rows,
          ...this.dataForm,
        },
      }).then(({ data }) => {
        this.dataListLoading = false
        if (data.code !== 1) {
          this.dataList = []
          this.total = 0
          return this.$message.error(data.msg)
        }
        this.dataList = data.data ? data.data : []
        this.total = data.total ? data.total : 0
        return data.data
      }).catch(() => {
        this.dataListLoading = false
      })
    },
    // 分页, 每页条数
    pageSizeChangeHandle(val) {
      this.page = 1
      this.rows = val
      if (this.dataForm.pageSize) {
        this.dataForm.pageNum = 1
        this.dataForm.pageSize = val
      }
      this.getDataList()
    },
    // 分页, 当前页
    pageCurrentChangeHandle(val) {
      this.page = val
      if (this.dataForm.pageNum) {
        this.dataForm.pageNum = val
      }
      this.getDataList()
    },
  },
}

三、使用这个文件

1.引入

//js文件名称是view-module.js,引入过来之后命名 mixinViewModule(后面需要用到,注意一致)
import mixinViewModule from "@/mixins/view-module";

2.声明

直接只贴声明的代码让人看不明代位置,声明的位置又不好描述,我这里直接贴图:

3.使用文件的html代码

<template>
  <section class="main-container-box">
      <el-form ref="form" :model="dataForm" inline>
        <el-form-item label="商品名称:">
          <el-input placeholder="请输入物资名称" v-model="dataForm.goodsName" clearable></el-input>
        </el-form-item>
        <el-form-item>
           //这里的getDataList方法不需要再methods中声明,会直接执行view-module.js中的getDataList方法,参数为上面声明的dataForm
           <el-button type="plain" @click="getDataList">查询</el-button>
        </el-form-item>
      </el-form>
      //这里的dataList和view-module.js文件中的数据列表dataList名称要一致,并且可以不用在data中声明
      <el-table-self
            :data="dataList"
            style="width:100%"
            :height="'calc(100vh - 1.3rem)'"
            >
            <el-table-column  label="序号"  type="index" align="center" header-align="center" width="60"></el-table-column>
            //这里就是自己表格中的数据,我只是遍历写出来的,大家可以不用管----↓
            <el-table-column
                  v-for="(item,index) in columnList"
                  :key="index"
                  show-overflow-tooltip
                  :align="item.align"
                  :fixed="item.fixed"
                  :prop="item.prop"
                  :label="item.label"
            ></el-table-column>
            //---------------------------------------------------------------↑
      </el-table-self>
	//这是分页组件,注意里面的参数:page,rows,total和方法pageSizeChangeHandle,pageCurrentChangeHandle名称都要和view-module中一致
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="rows"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      ></el-pagination>
  </section>
</template>

总结:在管理信息系统中,基本的表格的增删查改功能有很多,每个都写一个方法对接接口会很麻烦,有了这个js工具了之后,每个文件只需要把它引入,然后传入对应的参数就可以了(mixinViewModuleOptions),只需要注意各个参数和方法名称都要对应起来,不要写错了,就可以节省很多时间和代码啦!

vue组件封装及注意事项

props : {
        beanProps : {
            type : Object
        },
        // 多种类型
        propB: [String, Number],
        // 必传且是字符串
        propC: {
          type: String,
          required: true
        },
        // 数字,有默认值
        propD: {
          type: Number,
          default: 100
        },
        // 数组/对象的默认值应当由一个工厂函数返回
        propE: {
          type: Object,
          default: function () {
            return { message: 'hello' }
          }
        },
        // 自定义验证函数
        propF: {
          validator: function (value) {
           return value > 10
          }
        }
    },

我们在 props 中接收数据,注意props对象里面 键值 是对改数据的 数据类型 的规定。做了规范,使用者就只能传输指定类型(type类型)的数据,否则报警告

而props对象中的数据,我们可以直接在当前组件中使用  this.beanProps ,可以直接使用。这里要强调一下,props传过来的数据只做展示,不得修改,想修改,再新写一个data中的变量承接做数据的再处理。

调用的时候

<!--要调用的页面组件的页面需要import导入组件页面,然后再起别名-->
import treeSelectPeople from "../../../components/tree-select-people.vue";
 
<!--导入之后要添加组件到component对象里-->
 components: { treeSelectPeople },
 
<!--然后调用的时候标签名,就是你导入组件起的变量名了-->
<treeSelectPeople :beanProps="newBean.props"></treeSelectPeople>

我们已经会使用 父组件向子组件传数据了,那子组件如何来修改父组件的数据呢?

这里提供 2 种实现方法,但是 第一种不推荐,强烈不推荐

方式一:  

selectValue: {
          data: '1'
        },
 //代码段
 this.selectValue.data = '我被修改了'

即,父组件将 对象 数据传递给子组件,子组件直接修改props过来的对象的值

可以实现,感觉是一个比较快捷的方式。但是不推荐,这种方式写多了,容易出错,特别是多层组件嵌套的时候。这种修改对代码的迭代和错误的捕捉都不友好,所以建议大家别这样写。

他的实现原理简单提一下: 这个对象、数组啦,是引用数据类型,说白了,就是存储单元的信息是指针,真正数据在别的地方,通过指针查询的数据,所以这样写,对浏览器来说仅仅是传递了一个指针,数据还是同一份数据。所以你能修改。

方式二:

正儿八经的通过 $emit 方法去掉父组件的方法,在父组件中修改data的数据。(根正苗红的方法,规范写法)(就是在子组件新建一个新的变量来获取父组件传过来的值)

<template>
    <section class="f-mainPage">
        <!--selectFunc 选择完成的回调      searchList 下拉列表的数据-->
        <search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>
    </section>
</template>
<script type="text/ecmascript-6">
  import Search from '../vuePlugin/search'
  export default {
    data() {
      return {
        searchList: ['草船借箭', '大富翁', '测试数据'],
        // 直接通过props传递对象 修改,挺便捷的,但是不规范
        selectValue: {
          data: '1'
        },
        // 通过emit修改,规范写法
        selectValue2: ''
      }
    },
    mounted() {},
    methods: {
      pageGo(path) {
        this.$router.push('/' + path)
      },
      selectFunc(value) {
        this.selectValue2 = value
        console.log(this.selectValue)
        console.log(this.selectValue2)
      }
    },
    components: {
      Search
    }
  }
</script>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue mixins代码复用的项目实践

    目录 导语: 场景: 1. 代码里有很多当前组件需要的纯函数,methods过多 2. 举个例子你有一个组件需要抛出两个数据,直接的v-model不适用.需要采用$emit方法 3. 同理,可以通过这个方式复用很多data数据,避免模板化的声明 总结: 导语: 两年前来到新公司,开始使用vue开发,代码复用程度比较低.到后期大量的开发经验,以及看了一些设计模式类的书籍.才开始慢慢总结一些代码复用的经验.分享出来, PS: Vue版本2.6 场景: 1. 代码里有很多当前组件需要的纯函数,meth

  • vue3和vue2中mixins的使用解析

    目录 前言 Vue2 1.封装的mixin方法 2.具体页面引用 abc.vue 3.具体页面使用 abc.vue vue3官方入口(个人建议,不要再mixin用setup) 一.封装mixin里面具有setup 具体步骤 二.不需要在mixin里面使用setup  (官方支持用法) 具体使用 前言 vue的mixins里面放公共的js方法,但是vue3之后使用方法还是有些改变,这里来罗列下他们的区别. Vue2 1.封装的mixin方法 export const homeSensors = {

  • vue中混入mixins的使用方法

    目录 前言 使用方法 总结 前言 Vue中有一个设置项叫做混入 (mixins), 它的使用是用来做代码复用的.同时, 这个mixins 也分为局部混入和全局混入 vue中的解释是这样的,如果觉得语言枯燥的可以自行跳过嘿~ 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项.应用场景 下面先说一下 mixins 的应用场景, 假设现在我们两个组件, 当这两个组件被点击时,

  • 浅谈Vue3 Composition API如何替换Vue Mixins

    想在你的Vue组件之间共享代码?如果你熟悉Vue 2 则可能知道使用mixin,但是新的Composition API 提供了更好的解决方案. 在本文中,我们将研究mixins的缺点,并了解Composition API如何克服它们,并使Vue应用程序具有更大的可伸缩性. 回顾Mixins功能 让我们快速回顾一下mixins模式,因为对于下一部分我们将要讲到的内容,请务必将其放在首位. 通常,Vue组件是由一个JavaScript对象定义的,它具有表示我们所需功能的各种属性--诸如 data,m

  • vue 父子组件共用mixins的注意点

    目录 父子组件共用mixins的注意点 详解mixins混入使用 什么是Mixins? 什么时候使用Mixins? 如何创建Mixins? 如何使用Mixins? Mixins的特点 Mixins合并冲突 与vuex的区别 与公共组件的区别 父子组件共用mixins的注意点 父子组件正常引用(通过props传值):父子组件之间的关系是相互独立的 父子组件共用一个mixins:(在同一个作用域内,直接使用) 在开发过程中,会遇到tableData直接渲染的情况,数据量过大,则会拆分多个子组件,此时

  • vue中的mixins混入使用方法

    目录 作用 使用方法 全局混入 局部混入 作用 用简单的话去概括就是一种分发vue组件中的功能可以复用一个技术,使用这个技术我们可以把需要复用的内容封装成一个vue组件,方便下次使用方便 使用方法 首先在src中去创建一个自己的文件夹,然后把要封装的内容放入到这个文件夹,方便后续的调用 let mymixin={ methods:{ handleBtn(){ alert('封装的内容已经触发!') } } } export default mymixin 全局混入 全局混入就是我们可以把封装好的

  • vue中使用mixins/extends传入参数的方式

    目录 使用mixins/extends传入参数 vue mixins的原理 使用mixins/extends传入参数 最近做报表页面,基本都是列表页面,所以想用mixins. 但是接口的url不同,于是考虑怎么才能传入参数去适配各个页面. 后来发现mixin文件可以写个函数,接受传递过来的参数,然后return一个对象. 大概如下: mixin.js export default function(config) {     let {         listUrl="",    

  • vue中mixins的工具的封装方式

    目录 mixins工具的封装 vue的mixins的工具是什么? js工具代码 三.使用这个文件 vue组件封装及注意事项 调用的时候 我们已经会使用 父组件向子组件传数据了,那子组件如何来修改父组件的数据呢? mixins工具的封装 vue的mixins的工具是什么? 就是我们再写信息管理系统时,涉及到大量的增删查改调用后台接口的重复的方法,我们可以把这些方法集合起来直接作为一个js文件,后面可以直接引入,数据和方法都不需要声明,直接使用即可. 再概括一下,就是请求后台接口的方法的集合. js

  • 详解Vue中使用Echarts的两种方式

    1. 直接引入echarts 先npm安装echarts npm install echarts --save 开发: main.js import myCharts from './comm/js/myCharts.js' Vue.use(myCharts) myCharts.js /** * 各种画echarts图表的方法都封装在这里 */ import echarts from 'echarts' (function() { var chart = {}; chart.install =

  • vue中数据请求axios的封装和使用

    目录 一.什么是axios 二.下载方式 三.拦截器 四.请求的封装 五.使用 一.什么是axios 简单的来说,​Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,我们在项目中会经常用axios请求接口来获取数据. 二.下载方式 直接在当前使用的项目中打开终端: npm install axios --save 或者yarn  add  axios 三.拦截器 拦截器就是在数据请求的过程中,拦截请求或者拦截响应的技术 请求拦截器:就是在发送请求的时

  • Vue中mixins混入的介绍与使用详解

    目录 一.来自官网的描述 二.如何创建Mixins 三.项目中如何使用混入 四.与vuex的区别 五.与公共组件的区别 一.来自官网的描述 混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式.混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项. 二.如何创建Mixins 在src目录下创建一个mixins文件夹,文件夹下新建一个myMixins.js文件.前面我们说了mixins是一个js对象,所以应该以对象的形式来定义my

  • 详解vue中axios的使用与封装

    分享下我自己的axios封装 axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save 在src下新建文件夹 service / index.js 接着上代码 import axios from 'axios'; import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示 import router from '..

  • Vue中util的工具函数实例详解

    Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,具体代码如下所示: // 防抖函数 function debounce (fn, wait) { let t return () => { let context = this let args = arguments if (t) clearTimeout(t) t = setTimeout(() => { fn.apply(context, args) }, wait) } } function flatten (arr)

  • 详解Vue中组件传值的多重实现方式

    vue中组件传值方式整理 1.我们最熟悉的父子组件传值 父->子 props 子->父 $emit 这些我们最常用的就不说了,如果有不理解的,俺这儿有篇不错的文章,链接奉上~ https://www.cnblogs.com/LoveAndPeace/p/7273648.html 2.兄弟组件或无关系组件之间的传值 我们最常用的方式采用一个第三方变量 俗称eventbus 通过其中一个$emit发另一个$on接收的方式 实现组件传值 main.js中挂载一下 在其中一个页面$emit 另一个页面

  • vue中axios的二次封装实例讲解

    我们做项目时,虽然axios也可以直接拿来用,但是对接口比较零散,不太好进行维护,也会产生大量的重复代码,所以我在这对axios进行了统一接口处理 第一步,先在src中的公共文件夹中如utils里新建request.js文件 import axios from 'axios' import router from '@/router/routers' import { Notification, MessageBox } from 'element-ui' import store from '

  • Vue中keep-alive的两种应用方式

    Vue中keep-alive的使用我总结的有两种方式应用: 首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件.当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时又重新初始化.现在有需求切换回来不销毁组件,保持原来的状态,此时用keep-alive就可以实现了 我创建了两个组件,可以相互切换 组件1: 组件2: 第一种方式 在组件1的路由中添加 meta: { keepAlive: true }, 也就是当前路由需要缓存 此时路由设置完毕,keep-aliv

  • 在vue中写jsx的几种方式

    目录 版本 render函数 jsx/tsx 使用jsx的几种方式 使用js对象注册component 使用.vue文件 vue2.7在.vue文件中结合compositionApi和jsx 版本 本文版本配置 vue: 2.7.2 vue-cli: ~4.5.18: 本文代码github仓库地址 render函数 render函数和vue中的template是互斥的,template最终是要编译成virtual Dom的,而render函数可以更直接构建virtual Dom: virtual

随机推荐