vue中mixins的工具的封裝方式
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>
以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。