vue中mixins的工具的封裝方式
更新時(shí)間：2022年05月24日 11:39:51 作者：周小盜
這篇文章主要介紹了vue中mixins的工具的封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
mixins工具的封裝
vue的mixins的工具是什么？
就是我們?cè)賹?xiě)信息管理系統(tǒng)時(shí)，涉及到大量的增刪查改調(diào)用后臺(tái)接口的重復(fù)的方法，我們可以把這些方法集合起來(lái)直接作為一個(gè)js文件，后面可以直接引入，數(shù)據(jù)和方法都不需要聲明，直接使用即可。
再概括一下，就是請(qǐng)求后臺(tái)接口的方法的集合。
js工具代碼
具體注釋我會(huì)直接寫(xiě)在代碼里，然后大家可以自己直接對(duì)照著代碼看
代碼如下：
//這里引入了qs,使用npm install qs就可進(jìn)行安裝，在后面下載的方法里用到（get方法拼接參數(shù)），
//如果沒(méi)有這個(gè)需求，可以不引入（同時(shí)注意刪除下方的下載方法）
import qs from 'qs'
export default {
data() {
return {
//這個(gè)mixinViewModuleOptions需要在使用這個(gè)工具的時(shí)候在vue文件的data中聲明
mixinViewModuleOptions: {
mockData: null,
getDataListURL: '', // 數(shù)據(jù)列表接口 API地址
activatedIsNeed: true, // 此頁(yè)面是否在激活(進(jìn)入)的時(shí)候，調(diào)用查詢數(shù)據(jù)列表接口
queryDataURL: '', // table查詢接口
deleteURL: '', // 刪除接口
downLoadURL: '', // 下載接口
deleteIsBatch: false, // 是否批量刪除
deleteIsBatchKey: 'id', // 刪除接口，批量狀態(tài)下有那個(gè)key進(jìn)行標(biāo)記操作，比如 pid，uid
// getDataListIsPage: true // 不同的數(shù)據(jù)接口，返回的數(shù)據(jù)接口不相同，用次變量來(lái)區(qū)別
},
dataForm: {}, // 查詢條件
dataList: [], // 數(shù)據(jù)列表
page: 1, // 當(dāng)前頁(yè)碼
rows: 10, // 每頁(yè)數(shù)
total: 0, // 總條數(shù)
dataListLoading: false, // 數(shù)據(jù)列表，loading狀態(tài)
dataListSelections: [], // 數(shù)據(jù)列表，多選項(xiàng)
addOrUpdateVisible: false, // 新增／更新，彈窗visible狀態(tài)
}
},
created() {
if (this.mixinViewModuleOptions.activatedIsNeed) {
//獲取數(shù)據(jù)的方法
this.getDataList()
}
},
methods: {
// 下載excel
downLoadHandle(id) {
if (!this.dataList.length) {
return this.$message.warning('沒(méi)有可導(dǎo)出的數(shù)據(jù)')
}
if (!id) {
return this.$message.warning('id字段無(wú)效錯(cuò)誤')
}
const ids = this.dataListSelections.map(a => a[id]).join(',')
//最開(kāi)始引入的qs在這里用到，作用：將dataForm這個(gè)對(duì)象用‘&'拼接成字符串，再拼到下載鏈接后
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: '請(qǐng)選擇刪除項(xiàng)',
type: 'warning',
duration: 800,
})
}
this.$confirm('您確定刪除此條內(nèi)容么', '提示', {
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數(shù)據(jù)
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
})
},
// 分頁(yè), 每頁(yè)條數(shù)
pageSizeChangeHandle(val) {
this.page = 1
this.rows = val
if (this.dataForm.pageSize) {
this.dataForm.pageNum = 1
this.dataForm.pageSize = val
}
this.getDataList()
},
// 分頁(yè), 當(dāng)前頁(yè)
pageCurrentChangeHandle(val) {
this.page = val
if (this.dataForm.pageNum) {
this.dataForm.pageNum = val
}
this.getDataList()
},
},
}
三、使用這個(gè)文件
1.引入
//js文件名稱(chēng)是view-module.js,引入過(guò)來(lái)之后命名 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="商品名稱(chēng):">
<el-input placeholder="請(qǐng)輸入物資名稱(chēng)" v-model="dataForm.goodsName" clearable></el-input>
</el-form-item>
<el-form-item>
//這里的getDataList方法不需要再methods中聲明，會(huì)直接執(zhí)行view-module.js中的getDataList方法，參數(shù)為上面聲明的dataForm
<el-button type="plain" @click="getDataList">查詢</el-button>
</el-form-item>
</el-form>
//這里的dataList和view-module.js文件中的數(shù)據(jù)列表dataList名稱(chēng)要一致，并且可以不用在data中聲明
<el-table-self
:data="dataList"
style="width:100%"
:height="'calc(100vh - 1.3rem)'"
>
<el-table-column label="序號(hào)" type="index" align="center" header-align="center" width="60"></el-table-column>
//這里就是自己表格中的數(shù)據(jù)，我只是遍歷寫(xiě)出來(lái)的，大家可以不用管----↓
<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>
//這是分頁(yè)組件，注意里面的參數(shù)：page,rows,total和方法pageSizeChangeHandle,pageCurrentChangeHandle名稱(chēng)都要和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>總結(jié)：在管理信息系統(tǒng)中，基本的表格的增刪查改功能有很多，每個(gè)都寫(xiě)一個(gè)方法對(duì)接接口會(huì)很麻煩，有了這個(gè)js工具了之后，每個(gè)文件只需要把它引入，然后傳入對(duì)應(yīng)的參數(shù)就可以了（mixinViewModuleOptions），只需要注意各個(gè)參數(shù)和方法名稱(chēng)都要對(duì)應(yīng)起來(lái)，不要寫(xiě)錯(cuò)了，就可以節(jié)省很多時(shí)間和代碼啦！
vue組件封裝及注意事項(xiàng)
props : {
beanProps : {
type : Object
},
// 多種類(lèi)型
propB: [String, Number],
// 必傳且是字符串
propC: {
type: String,
required: true
},
// 數(shù)字，有默認(rèn)值
propD: {
type: Number,
default: 100
},
// 數(shù)組/對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
return value > 10
}
}
},我們?cè)?props 中接收數(shù)據(jù)，注意props對(duì)象里面 鍵值 是對(duì)改數(shù)據(jù)的 數(shù)據(jù)類(lèi)型 的規(guī)定。做了規(guī)范，使用者就只能傳輸指定類(lèi)型（type類(lèi)型）的數(shù)據(jù)，否則報(bào)警告
而props對(duì)象中的數(shù)據(jù)，我們可以直接在當(dāng)前組件中使用 this.beanProps ，可以直接使用。這里要強(qiáng)調(diào)一下，props傳過(guò)來(lái)的數(shù)據(jù)只做展示，不得修改，想修改，再新寫(xiě)一個(gè)data中的變量承接做數(shù)據(jù)的再處理。
調(diào)用的時(shí)候
<!--要調(diào)用的頁(yè)面組件的頁(yè)面需要import導(dǎo)入組件頁(yè)面，然后再起別名-->
import treeSelectPeople from "../../../components/tree-select-people.vue";
?
<!--導(dǎo)入之后要添加組件到component對(duì)象里-->
?components: { treeSelectPeople },
?
<!--然后調(diào)用的時(shí)候標(biāo)簽名，就是你導(dǎo)入組件起的變量名了-->
<treeSelectPeople :beanProps="newBean.props"></treeSelectPeople>我們已經(jīng)會(huì)使用 父組件向子組件傳數(shù)據(jù)了,那子組件如何來(lái)修改父組件的數(shù)據(jù)呢？
這里提供 2 種實(shí)現(xiàn)方法，但是 第一種不推薦，強(qiáng)烈不推薦
方式一：
selectValue: {
? ? ? ? ? data: '1'
? ? ? ? },
//代碼段
this.selectValue.data = '我被修改了'即，父組件將 對(duì)象 數(shù)據(jù)傳遞給子組件，子組件直接修改props過(guò)來(lái)的對(duì)象的值
可以實(shí)現(xiàn)，感覺(jué)是一個(gè)比較快捷的方式。但是不推薦，這種方式寫(xiě)多了，容易出錯(cuò)，特別是多層組件嵌套的時(shí)候。這種修改對(duì)代碼的迭代和錯(cuò)誤的捕捉都不友好，所以建議大家別這樣寫(xiě)。
他的實(shí)現(xiàn)原理簡(jiǎn)單提一下： 這個(gè)對(duì)象、數(shù)組啦，是引用數(shù)據(jù)類(lèi)型，說(shuō)白了，就是存儲(chǔ)單元的信息是指針，真正數(shù)據(jù)在別的地方，通過(guò)指針查詢的數(shù)據(jù)，所以這樣寫(xiě)，對(duì)瀏覽器來(lái)說(shuō)僅僅是傳遞了一個(gè)指針，數(shù)據(jù)還是同一份數(shù)據(jù)。所以你能修改。
方式二：
正兒八經(jīng)的通過(guò) $emit 方法去掉父組件的方法，在父組件中修改data的數(shù)據(jù)。（根正苗紅的方法，規(guī)范寫(xiě)法）（就是在子組件新建一個(gè)新的變量來(lái)獲取父組件傳過(guò)來(lái)的值）
<template> ? ? <section class="f-mainPage"> ? ? ? ? <!--selectFunc 選擇完成的回調(diào) ? ? ?searchList 下拉列表的數(shù)據(jù)--> ? ? ? ? <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: ['草船借箭', '大富翁', '測(cè)試數(shù)據(jù)'],
? ? ? ? // 直接通過(guò)props傳遞對(duì)象 修改，挺便捷的,但是不規(guī)范
? ? ? ? selectValue: {
? ? ? ? ? data: '1'
? ? ? ? },
? ? ? ? // 通過(guò)emit修改，規(guī)范寫(xiě)法
? ? ? ? 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>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
大家應(yīng)該都知道vue是單向數(shù)據(jù)流，一般我們也不會(huì)在子組件里面修改父組件傳進(jìn)來(lái)的值，但總有需要修改的時(shí)候，這篇文章主要介紹了vue中修改props傳進(jìn)來(lái)的值,需要的朋友可以參考下2022-12-12
vue.js動(dòng)態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了vue.js動(dòng)態(tài)數(shù)據(jù)綁定學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
nuxt中刷新頁(yè)面后防止store值丟失問(wèn)題
這篇文章主要介紹了nuxt中刷新頁(yè)面后防止store值丟失問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
VUE使用axios調(diào)用后臺(tái)API接口的方法
這篇文章主要介紹了VUE使用axios調(diào)用后臺(tái)API接口的方法，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-08-08
這篇文章給大家介紹了vue組件創(chuàng)建和傳值的方法，創(chuàng)建組件有三種方法，文中給大家介紹的非常詳細(xì)，父組件傳值給子組件的方法，給大家介紹的也非常詳細(xì)，需要的朋友參考下吧2018-08-08
前端Vue頁(yè)面中展示本地圖片簡(jiǎn)單代碼示例
今天遇到一個(gè)在vue文件中引入本地圖片的問(wèn)題,于是有了這篇文章,本文主要給大家介紹了關(guān)于前端Vue頁(yè)面中展示本地圖片的相關(guān)資料,需要的朋友可以參考下2023-12-12
本文主要介紹了vue3整合springboot打完整jar包,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
使用Bootrap和Vue實(shí)現(xiàn)仿百度搜索功能
這篇文章主要介紹了使用Bootrap和Vue實(shí)現(xiàn)仿百度搜索功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-10-10
解決element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊問(wèn)題
這篇文章主要介紹了解決element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
<keep-alive> 是一個(gè)抽象組件,用于將其內(nèi)部的組件保留在內(nèi)存中,而不會(huì)重新渲染,這意味著當(dāng)組件在<keep-alive> 內(nèi)部切換時(shí),其狀態(tài)將被保留,而不是被銷(xiāo)毀和重新創(chuàng)建,這篇文章主要介紹了Vue中的keep-alive緩存組件的理解,需要的朋友可以參考下2024-01-01