vue方法封装,vue mixins使用
本文主要介绍了vue中mixins工具的封装方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
mixins工具封装vue的mixins的工具是什么？Js工具代码三。当使用这个文件封装vue组件并引起注意时，我们已经使用父组件向子组件传输数据。子组件如何修改父组件的数据？
mixins工具的封装
vue的mixins的工具是什么？
也就是我们在重新编写信息管理系统的时候，涉及到大量重复的添加、删除、检查、更改后台界面的方法。我们可以把这些方法收集起来，直接作为一个js文件使用，后面可以直接介绍。数据和方法不需要声明，可以直接使用。
总而言之，它是请求后台接口的方法的集合。
js工具代码
我会把具体的注释直接写在代码里，然后你可以直接对照代码看。
代码如下：
//这里介绍qs，可以使用npm install qs安装，在后面下载的方法中使用(get方法拼接参数)。
//如果没有这个要求，就不要介绍了(同时注意删除下面的下载方式)
从“qs”导入qs
导出默认值{
data() {
返回{
//使用该工具时需要在vue文件的数据中声明这个mixinViewModuleOptions。
mixinViewModuleOptions: {
mockData: null，
GetDataListURL: ，///数据列表接口API地址
activatedesined:true，//该页面激活(输入)时是否调用查询数据列表界面
QueryDataURL: ，//表查询接口
Url: ，//删除接口
DownLoadURL: ，//下载接口
DeleteIsBatch: false，//批量删除？
DeleteIsBatchKey: id ，//删除接口。在批量状态下，pid和uid哪个键用于标记？
//getDataListIsPage: true //数据接口不同，返回的数据接口也不同，用二级变量来区分。
},
数据形式：{}，///查询条件
数据列表：[]，//数据列表
Page: 1，//当前页码
行数：10，//每页
总计：0，//文章总数
DataListLoading: false，//数据列表，加载状态
DataListSelections: []，///数据列表，多选
AddUpdateVisible: false，//添加/更新，弹出可见状态
}
},
已创建(){
if(this . mixinviewmoduleoptions . activatedisneed){
//获取数据的方法
this.getDataList()
}
},
方法：{
//下载excel
下载句柄(id) {
如果(！this.dataList.length) {
归还这个。$message.warning(没有要导出的数据)
}
如果(！id) {
返回。$ message.warning(“无效id字段错误”)
}
const ids=this . datalist selections . map(a=a[id])。联接(，)
//这里用的是开头介绍的qs。它的功能是将dataForm对象拼接成带“”的字符串，然后拼写成下载链接。
const data form=QS . stringify(object . assign({ }，this.dataForm，{ ids }))
const url=`${window。站点配置。BASE _ URL . serverip } $ { this . mixinviewmoduleoptions . download URL }？{ data form } `
window.open(url)
},
//删除
删除句柄(id) {
如果(！id this . mixinviewmoduleoptions . deleteisbatch
this . datalist selections . length=0){
归还这个。$message({
消息：“请选择要删除的项目”，
类型：警告，
时长：800，
})
}
这个。$confirm(您确定要删除此内容吗，提示，{
ConfirmButtonText:确定，
CancelButtonText:取消，
类型：警告，
}).然后(()={
让ids=
if(this . datalist selections . length){
ids=this . datalist selections . map(item=
` $ { item[this . mixinviewmoduleoptions . deleteisbatchkey]} `)。联接(，)
}否则{
ids=id
}
这个. http。get(`/$ { this。mixinviewmoduleoptions。deleteurl } `，{
参数：{
id: ids，
},
}).然后(({ data })={
if (data.code！==1) {
归还这个message.error
}
这个消息({
类型："成功",
消息： 删除成功!,
时长：800,
onClose: ()={
this.getDataList()
},
})
})
}).catch(()={
})
},
//新增/修改
addOrUpdateHandle(id) {
this.addOrUpdateVisible=true
这个. nextTick(()={
这个参考文献。addorupdate。数据表单。id=id
这个. refs.addOrUpdate.init()
})
},
dataListSelectionChangeHandle(val){
this.dataListSelections=val
},
//查询
queryHandle() {
this.page=1
this.getDataList()
},
//获取桌子数据
getDataList() {
this.dataList=[]
this.dataListLoading=true
归还这个. http。get(`/$ { this。mixinviewmoduleoptions。getdatalisturl } `)，{
参数：{
page: this.page，
rows: this.rows，
.this.dataForm，
},
}).然后(({ data })={
this.dataListLoading=false
if (data.code！==1) {
this.dataList=[]
this.total=0
归还这个message.error
}
this.dataList=data.data？data.data : []
this.total=data.total？总计：0
返回数据。数据
}).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文件名称是视图-模块。js，引入过来之后命名mixinViewModule(后面需要用到，注意一致)
从" @/mixins/视图模块"导入mixinViewModule
2.声明
直接只贴声明的代码让人看不明代位置，声明的位置又不好描述，我这里直接贴图：
3.使用文件的html代码
模板
section class=主容器箱
El-form ref= form :model= data form inline
El-表单-项目标签=商品名称：
埃尔-输入占位符=请输入物资名称v-model=数据表单。商品名称可清除/El-输入
/El-表单-项目
埃尔-表单-项目
//这里的getDataList方法不需要再方法中声明，会直接执行视图-模块。射流研究…中的getDataList方法，参数为上面声明的数据形式
El-button type= plain @ click= get datalist 查询/el-button
/El-表单-项目
/el格式
//这里的数据列表和视图-模块。射流研究…文件中的数据列表数据列表名称要一致，并且可以不用在数据中声明
埃尔-表格-自我
:data=dataList
style=宽度：100%
:height=calc(100vh - 1.3rem)
埃尔-表格-列标签=序号type= index align=center header-align= center width= 60 /El-table-column
//这里就是自己表格中的数据，我只是遍历写出来的，大家可以不用管-
埃尔-表格-列
v-for=(item，index) in columnList
:key=index
显示溢出工具提示
:align=item.align
:fixed=item.fixed
:prop=item.prop
:label=item.label
/El-表格-列
//-
/El-表格-自我
//这是分页组件。注意它里面的参数：page、rows、total和方法pagesizechangehandle。pagecurrentchangehandle的名称应该与view-module中的名称一致。
el分页
:current-page=page
:page-size=[10，20，50，100]
:page-size=rows
:total=total
layout=总计，大小，上一页，分页，下一页，跳转
@ size-change= pageSizeChangeHandle
@ current-change= pageCurrentChangeHandle
/El-分页
/部分
/模板
总结：在管理信息系统中，基础表的添加、删除、检查、修改等功能很多，每一个都要写一个方法接口会很麻烦。有了这个js工具，每个文件只需要导入，然后就可以传入相应的参数(mixinViewModuleOptions)。只要注意每个参数和方法名的对应关系，不要出错，这样可以节省大量的时间和代码！
vue组件封装及注意事项
道具：{
beanProps : {
类型：对象
},
//多种类型
propB:[字符串，数字]，
//必须被传递，并且是一个字符串
propC: {
类型：字符串，
必填：真
},
//数字，带有默认值
propD: {
类型：数量，
默认值：100
},
//数组/对象的默认值应该由工厂函数返回
属性：{
类型：对象，
默认值：function () {
return { message:你好 }
}
},
//自定义验证函数
propF: {
验证器：函数(值){
返回值10
}
}
},
我们接收道具中的数据。注意，props对象中的关键值是调节数据类型的数据变化。规范制定后，用户只能传输指定类型(type type)的数据，否则会给出警告。
而props对象中的数据，我们可以在当前组件中直接使用this.beanProps，并且可以直接使用。这里需要强调的是，道具传输的数据仅用于展示，不可修改。如果你想修改它，你应该在数据中写一个新的变量来进行数据再处理。
调用的时候
！-要调用的页面组件的页面需要导入组件页面，然后重新别名-
导入树选择人员来源./././components/tree-select-people . vue ；
！-导入后将组件添加到组件对象-
组件：{ treeSelectPeople }，
！-然后在调用时，标记名是变量名，因为您导入了组件-
trees elect people:bean props= new bean . props /trees elect people
我们已经会使用 父组件向子组件传数据了，那子组件如何来修改父组件的数据呢？
这里提供了两种实现方法，但是第一种不推荐，强烈不推荐。
方式一：
选择值：{
数据：“1”
},
//代码片段
This.selectValue.data=我被修改了
即父组件将对象数据传递给子组件，子组件直接修改props传递的对象的值。
是的，感觉这是一种更快的方法。但是，不建议这样做。这种方式写的太多，容易出错，尤其是多层组件嵌套的时候。这种修改对代码迭代和错误捕获都不友好，建议大家不要这样写。
简单提一下他的实现原理：这个对象和数组是一个引用数据类型。说白了，存储单元里的信息就是一个指针，真正的数据在另一个地方，通过指针查询数据。所以这样写只是传递了一个指向浏览器的指针，数据还是原来的数据。所以可以修改一下。
方式二：
说真的，父组件是用$emit方法移除的，数据的数据是在父组件中修改的。(在红色中生根的方法，标准化的写法)(即在子组件中创建新的变量来获得父组件传递的值)
模板
section class=f-mainPage
！- selectFunc选择已完成的回调搜索列表下拉列表的数据-
search @ select func= select func :search list= search list :select value= select value /search
/部分
/模板
脚本类型=text/ecmascript-6
导入搜索自./vue插件/搜索
导出默认值{
data() {
返回{
SearchList: [草船借箭，大富翁，测试数据]，
//直接通过小道具传递对象修改，挺便捷的，但是不规范
选择值：{
数据："1"
},
//通过发射修改，规范写法
选择值2:""
}
},
已安装(){},
方法：{
佩吉戈(路径){
这个. router.push(/路径)
},
selectFunc(value) {
this.selectValue2=值
console.log(this.selectValue)
console.log(this.selectValue2)
}
},
组件：{
搜索
}
}
/脚本
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。