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