vue 父子组件传值 子组件修改父组件值的解决办法

最近在前端项目中遇到了父子组件传值的问题...

vue中父组件向子组件传值时，其父子prop之间造成单向下行绑定，反过来则不行，这样会防止子组件意外改变父组件的值，从而数据流变的难以理解；另外，每次父组件的数据发生更新时，子组件的都会刷新到最新的数据，但不能改变子组件内部改变prop，这样浏览器就会发出警告

解决办法来啦

解决办法1、子组件想要修改时，须要经过$emit派发一个自定义事件，父组件收到后，由父组件进行修改

子组件在computed中，

computed:{
  currentActiveNames: {
   get() {
    return this.activeNames //父组件传给子组件的值
   },
   set(val) {
    // 改变由父组件控制
    this.$emit('on-change-activeNames', val)   
   }
  }
}

这样子组件告诉父组件本身修改了父组件传过来的值

接下来呢，父组件中在引用子组件的地方添加@on-change-activeNames="changeActiveNames"，另外，在methods方法中定义changeActiveNames用来接收父组件传过来的值

methods：{
 changeActiveNames(val){
  console.log(‘子组件传过来的值’，val)
 }
}

解决办法2、

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，若是 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

大概意思就是：只要prop是对象或者数组，在子组件里面就能够修改从而改变父组件的值

那具体要怎么写呢...

1. 父组件中引入子组件 <child :par-obj="parObj"><child/>  child为子组件的名称（这里提一下 子组件名若为驼峰式，父组件引用的时候用‘-’链接 例如子组件名称为 childCom 引用时则用child-com）

2. parObj为传给子组件的对象，在data中定义 重点来啦....在data中能够这样定义

parObj:{ 
    parVal: 1
},

这样palVal才是你须要真正传给子组件的值

3. 在子组件中

props: {
  parObj: {
    type: Object,
    default: null
  }
},

拿到parObj后，子组件就能够肆意的改变parObj对象中的parVal啦