vue组件间数据传递的易错点

• 问题出现
• 如何解决
• 警告原因
• el-dialog作为子组件时，怎么传递值给父组件
• 知识点

问题出现

　　近期在使用vue做项目过程中，父组件a将数据传递给了子组件b，子组件b中做了状态的处理，然后习惯性的修改了父组件a传过来的值，即修改了子组件props中的值，这时实际效果正常展现，但是F12打开浏览器时，却看到浏览器中抛出了警告信息。

如何解决

　　仔细查看该警告信息，实际已近告诉了解决办法。即如果想要使用装饰性的数据信息，可以使用computed属性进行进一步运算。如从父组件向子组件传了小写的字符串信息，但在子组件需要使用大写的字符串信息，此时就可以使用computed属性，对传来的props属性值，进行upperCase的转换操作。

computed: {
    upperString: {
        get: function() {
          return this.$props.lowerString;
        }
    }
}

警告原因

　　之所以出现该警告的原因，是因为在vue中，数据的传递是单向性的，即数据都是从父级组件单向下行进行绑定的，而且通过props传递的子组件属性，是直接受到父组件数据的影响，进行响应式变化的。即父组件数据变化，会直接影响子组件中的数据变化。如果在子组件中，修改了该父组件传递的数据，会导致vue无法监控数据状态的变化。
　　不过，在子组件中，可以通过$emit方式，更改某个想要传递给父组件的数据信息，在父组件中，进行间接的赋值更改。在实际开发中，通常有两种情况会习惯性的更改父组件传来的值。
　　第一种是，将父组件传来的值，当做子组件自己的属性进行应用，也就是我当时所犯的那个错误。这个错误必须使用emit方法向父组件进行数据传递，间接的去改变父组件的属性值。
　　第二种是，将父组件的值，进行格式上的转化后再使用，这种方式也就是本文提到的使用computed属性修改去解决。

el-dialog作为子组件时，怎么传递值给父组件

　　在这次的项目中，我利用element-ui中的el-dialog作为子组件，当我的父组件向该组件传关闭flag值时，子组件需要通过emit方法向父组件间接更改属性值。但我发现即使利用了本文提到的方法解决，还是会出现该警告信息，后来查看el-dialog的源码，才找到问题的解决办法。
　　
　　
　　这是问题出现时的截图信息，可以看到，最后的解决办法，是我将修改属性，放到了el-dialog的before-close属性中。
　　查看element-ui源码可以发现，当在关闭对话框前，如果该属性是function，必须在befor-close属性中定义close方法。由于emit是个方法属性，因此必须首先定义在before-class属性中，然后在定义的属性close方法中，才能去调用传递给父组件的emit方法。
　　
　　至此，问题得以解决。

知识点

• 父子组件的单向数据传递。
• 子组件传递父组件的方式，使用emit方法。
• 装饰性使用父组件传递属性，可以使用computed中的get属性，进行数据修饰转换。
• el-dialog作为子组件，调用emit方法时，需要在befor-close属性中，首先定义方法，再调用emit。