自定义组件:父组件中使用v-model将值传入子组件,并且子组件也能将值传回父组件,v-model是双向传递。
而数据绑定:v-bind(缩写为:)只能将数值传给子组件,而无法将值传给父组件。
大概知道这些就开始写了。
父组件:
子组件:
数据通过父组件中的v-model传入子组件中props中的同名变量中。不对呀,如果是v-bind:后面接的是子组件中props的中的变量名,等于后面接的是父组件中的变量名,(如::uploadFileData="{'category':'insurance'}")。这样才能实现父子传值,但是v-model中并没有说传到props 中的哪个变量中,如何匹配呢?
公司的代码如下:
子组件:
父组件:
我们观察上面的例子可以知道:父组件v-model的变量名和子组件中props没有相同的,所以肯定不是以同名变量进行匹配,而是将v-mdel中的值传入props 的value中,后端通过$emit()调用v-model的预设事件input,传回给父组件,从而实现v-model值的双向传递。
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"
错误原因: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 中加多一个和父类同名的变量就不会了
不知道为什么
之后又会了,不是很明白
官方文档:
https://cn.vuejs.org/v2/guide/components.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model
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 (
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。所以传值有问题,解决之后就没有问题了。
语法部分知道怎么做了,现在需要将逻辑完善。
图片的操作只有两种,删除和添加
添加:直接将返回的url push到list中即可,如果传过来的list有初始值也没有什么逻辑问题。
删除:1.将数组清空,再将数据放入:如果初始有值如何处理?
这个时候我们需要知道fileList 和 传入的value有什么区别。
value:
fileList:
说明经过fileUploadSucc能够将push成功,并且fileList只是将包括了所有显示出来的文件,然后呢?如果想要清空之后再来添加,必须要原来的传入的list,即value,以及。。想不明白了
情况1:传入的是null,没有删除
情况2:传入的list有一个项,点击删除,清空,fileList放入,因为fileList已经为null了,所以不会传入,循环的时候会报错吗?
2.找到对应的项,进行删除:多用一个项存储uid