Vue.js之props组件传值

1,719 阅读2分钟

前言

今天在开发的时候遇到一个问题,就是给子组件传值之后,在子组件改变了值,导致Vue报警告,仔细看了下文档,Vue遵循是单项数据流:1.即只允许父组件传递参数到子组件,而不允许子组件传递到父组件。 2.在父组件参数值变了子组件也会变,但是子组件参数值变了父组件却不会变,而且在子组件去修改参数的话会被vue警告:

内容

废话不多说,先来看一个例子 我们通过注册一个全局组件Test,然后传两个值给他,,并在子组件绑定一个方法changeValue,将父组件传给他gender进行改变,这时查看chrome的控制台,可以看到该信息

解决办法

可以在data或者computed声明一个变量 可以看到这时我们改变genderCopy的值控制台并没有报错,但是这里面也有一个细节:此时使用data声明的变量由于值中转了下,然后也不是引用类型,所以在这里我们父组件对此参数修改了,子组件就不会同步更改,如果此时想同步更改,我们可以是使用watch

需要注意的一些点

当通过props传递过来的是值是引用类型的时候,如数组或者对象,此时我们通过子组件更改其传递过来的值,也会改变父组件的值,但是是不会像基本类型那样控制台报警告的,这是需要注意的

由于在js中,对象和数组是引用类型,指向同一个内存空间,所以当我们通过v-bind绑定的参数是一个数组或对象,然后传递过来时,那么他们在子组件的改变会影响到父组件的,(这和vue组件无关,由js特性所决定的,如果想避免这种情况,那么在子组件接收到此引用类型参数后处理下即可,如用JSON方法处理或用Object.assign()方法处理等)