自定义组件：父组件中使用v-model将值传入子组件，并且子组件也能将值传回父组件，v-model是双向传递。
而数据绑定：v-bind（缩写为：）只能将数值传给子组件，而无法将值传给父组件。
大概知道这些就开始写了。
父组件：
<upload
v-model="this.uploadFileListTest"
:uploadFileData="{'category':'insurance'}">
</upload>
子组件：
<template id="upload">
<div>
<el-upload
action="/api/public/fileUpload"
:data="uploadFileData"
name="files"
listType="picture-card"
multiple
:file-list="uploadFileList"
:on-success = "fileUploadSucc"
:on-remove = "pictureRemove"
:on-preview = "showPic">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="showPicDialogVisible">
<img width="100%" :src="imageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
export default {
create(){
}
,data:function(){
return {
//uploadFileList:[],
showPicDialogVisible: false
//操作0表示添加，1表示删除
,operate:0
//用于展示页面的url
,imageUrl:''
,tempfileList:this.uploadFileList
}
},
props:[
'uploadFileData'
,'listType'
,'uploadFileList'
],
methods:{
fileUploadSucc(response, file, fileList){
console.log(fileList);
this.tempfileList.push({url:response.returnData.list[0].url});
console.log(this.tempfileList);
this.$emit('input', this.tempfileList);
},
pictureRemove(file, fileList){
console.log(fileList);
this.tempfileList = [];
// this.tempfileList = fileList;
console.log(this.tempfileList);
for(var item in fileList){
this.tempfileList.push({url:fileList[item].response.returnData.list[0].url});
}
// this.tempfileList.push({url:file.response.returnData.list[0].url});
this.$emit('input', this.tempfileList);
}
//展示图片弹窗使能，url赋值
,showPic(file){
this.imageUrl = file.url;
this.showPicDialogVisible = true;
}
},
mounted(){
},
computed: {
}
}
</script>
数据通过父组件中的v-model传入子组件中props中的同名变量中。不对呀，如果是v-bind:后面接的是子组件中props的中的变量名，等于后面接的是父组件中的变量名，（如：:uploadFileData="{'category':'insurance'}"）。这样才能实现父子传值，但是v-model中并没有说传到props 中的哪个变量中，如何匹配呢？
公司的代码如下：
子组件：
<template>
<div>
<el-upload ref="upload"
action="/api/public/uploadimage"
:data="uploadPicData"
name="upfile"
accept="image/*"
listType="picture-card"
:multiple="false"
:file-list="uploadPicList"
:show-file-list="false"
:on-preview="handlePictureCardPreview"
:on-success="handlePictureSuccess">
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
</template>
<script>
export default {
data: function () {
return {
uploadPicList: [],
imageUrl: this.value,
dialogImageUrl: '',
dialogVisible: false
}
},
props: ['value',
'uploadPicData',
'show-file-list', 'label'],
methods: {
handlePictureSuccess(res, file, filelist) {
file.name = res.name;
file.url = res.url;
this.imageUrl = file.url;
this.uploadPicList = filelist;
//this.$emit('handleUpload',file.url);
this.$emit('input', file.url);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
},
mounted() {
},
computed: {}
}
</script>
父组件：
</el-form-item>
<el-form-item label="车型视频" prop="carModelVideo">
<newLifeUploadFile :uploadFileData="uploadPicData"
v-model="tempModel.carModelVideo"></newLifeUploadFile>
</el-form-item>
我们观察上面的例子可以知道：父组件v-model的变量名和子组件中props没有相同的，所以肯定不是以同名变量进行匹配，而是将v-mdel中的值传入props 的value中，后端通过$emit()调用v-model的预设事件input，传回给父组件，从而实现v-model值的双向传递。
<el-table-column align="center" prop="" label="测试" width="150">
<upload
v-model="this.uploadFileList"
:uploadFileData="{'category':'insurance'}">
</upload>
</el-table-column>
props:[
'uploadFileData'
,'listType'
// ,'uploadFileList'
,'value'
],
methods:{
fileUploadSucc(response, file, fileList){
console.log(this.value);
console.log(fileList);
this.tempfileList.push({url:response.returnData.list[0].url});
console.log(this.tempfileList);
this.$emit('input', this.value);
},
使用emit的时候会报错：
Cannot use 'in' operator to search for 'uploadFileList' in null"
image.png
错误原因：The in operator can only be used to check if a property is in an object. You can't search in strings, or in numbers, or other primitive types.
参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/in_operator_no_object
emit会在使用的时候用in ，in 操作的不能为null 或者 undefined。
只要在props 中加多一个和父类同名的变量就不会了
不知道为什么
之后又会了，不是很明白
emit改为：this.event.target.value);
报错：$event is not defined
如果将this.value通过JSON.parse()转成json，则报错如下
VM841:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at VueComponent.fileUploadSucc (0.9ca2d645166ada457aec.hot-update.js:49)
at VueComponent.boundFn (app.js:266086)
at VueComponent.handleSuccess (app.js:116089)
at VueComponent.boundFn (app.js:266086)
at Object.onSuccess (app.js:116611)
at XMLHttpRequest.onload (app.js:116763)
最后发现是因为点出dialog的时候就有报错导致的，不是用el-form-item。所以传值有问题，解决之后就没有问题了。
<el-form-item label="备注照片" prop="uploadFileList2">
语法部分知道怎么做了，现在需要将逻辑完善。
图片的操作只有两种，删除和添加
添加：直接将返回的url push到list中即可，如果传过来的list有初始值也没有什么逻辑问题。
删除：1.将数组清空，再将数据放入：如果初始有值如何处理？
这个时候我们需要知道fileList 和 传入的value有什么区别。
value：
image.png
fileList：
image.png
说明经过fileUploadSucc能够将push成功，并且fileList只是将包括了所有显示出来的文件，然后呢？如果想要清空之后再来添加，必须要原来的传入的list，即value，以及。。想不明白了
情况1：传入的是null，没有删除
情况2：传入的list有一个项，点击删除，清空，fileList放入，因为fileList已经为null了，所以不会传入，循环的时候会报错吗？
2.找到对应的项，进行删除：多用一个项存储uid
网友评论