vue父子组件传值-06-03

自定义组件：父组件中使用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"

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 中加多一个和父类同名的变量就不会了
不知道为什么

之后又会了，不是很明白

官方文档：
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：

image.png

fileList：

image.png

说明经过fileUploadSucc能够将push成功，并且fileList只是将包括了所有显示出来的文件，然后呢？如果想要清空之后再来添加，必须要原来的传入的list，即value，以及。。想不明白了

情况1：传入的是null，没有删除
情况2：传入的list有一个项，点击删除，清空，fileList放入，因为fileList已经为null了，所以不会传入，循环的时候会报错吗？

2.找到对应的项，进行删除：多用一个项存储uid