最佳实践：vue组件引用传值

下述组件传值指引用类型（数组或对象）传值。

准备：单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

• 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。
  定义一个本地的 data property 并将这个 prop 用作其初始值

  props: ['initialCounter'],
  data: function () {
    return {
      counter: this.initialCounter
    }
  }
  

• 这个 prop 以一种原始的值传入且需要进行转换。
  使用这个 prop 的值来定义一个计算属性

  props: ['size'],
  computed: {
    normalizedSize: function () {
      return this.size.trim().toLowerCase()
    }
  }
  

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

问题

父子组件间，通过引用类型传值，为什么控制台不会告警（基本类型会告警）？Object.assign() 或者 JSON.parse(JSON.stringify()) 是在子组件中传引用值的标准处理方法吗？

问题1

父组件 App.vue

<template>
  <div id="app">
    <child :initialValue="valueEmit">
    </child>
  </div>  
</template>  
<script>
import childEmit from './components/child.vue'
export default {
	data () {
    return {
      valueEmit: {dog: 1, cat: 2}
    }
  },
  components: {
    child
  }
}        
</script>        

子组件 components/child.vue

<template>
  <div class="child-container">
    <p> 
      <label for="cat">猫🐱：</label>
      <input id="cat" type="text" v-model="value.cat" />
    </p>
    <p>
      <label for="dog">狗🐶：</label>
      <input id="dog" type="text" v-model="value.dog" />
    </p>
  </div>
</template>
<script>
export default {
  name: 'child',
  props: {
    initialValue: Object
  },
  data () {
    return {
      value: this.initialValue 
    }
  }
}
</script>

子组件内的修改，父组件也会直接变更，且不告警！

问题2

修改子组件，子组件 components/child.vue

export default {
  name: 'child',
  props: {
    initialValue: Object
  },
  data () {
    return {
      valueEmit: Object.assign({}, this.initialValue)
    }
  }
}

切断了引用，但是父组件变化不会触发子组件响应！（computed or watch 可以实现）

问题3

父组件 App.vue

<template>
  <div id="app">
    <child
      :initialValue="valueEmit"
      @update-value-by-child="updateParentValue">
    </child>
  </div>  
</template>  
<script>
import childEmit from './components/child.vue'
export default {
	data () {
    return {
      valueEmit: {dog: 1, cat: 2}
    }
  },
  components: {
    child
  },
  methods: {
    updateParentValue(newValue) {
      this.valueEmit = newValue
    }
  }
}        
</script>        

子组件 components/child.vue

<template>
  <div class="child-container">
    <p> 
      <label for="cat">猫🐱：</label>
      <input id="cat" type="text" v-model="valueEmit.cat"
        @input="$emit('update-value-by-child', valueEmit)" />
    </p>
    <p>
      <label for="dog">狗🐶：</label>
      <input id="dog" type="text" v-model="valueEmit.dog" />
    </p>
  </div>
</template>
<script>
export default {
  name: 'child',
  props: {
    initialValue: Object
  },
  data() {
    return {
      valueEmit: Object.assign({}, this.initialValue)
    }
  }
}
</script>

现象：

1. 首先对“dog”进行修改，父组件的 initialValue 并未发生改变
2. 对“cat”进行修改，父组件的 initialValue 发生变化（dog、cat都被修改了）
3. 此时，在对“dog”修改，父组件的 initialValue 发生变化！

总结

1. 纯展示
   直接使用父组件属性，不会有副作用！

   <template>
   	<div>
       {{parentObj.value}}
     </div>
   </template>
   <script>
   	export default {
       name: 'child',
       props: {
         parentObj: Object
       }
     }
   </script>
   

2. 只子组件内部修改，父组件不会修改（即，父组件只做初始化）
   子组件 data 中声明新的数据，通过 Object.assign() 或者 JSON.parse(JSON.stringify()) 切断引用即可。

   <template>
   	<div>
       <input type="text" v-model="childObj.value">
     </div>
   </template>
   <script>
   	export default {
       name: 'child',
       props: {
         parentObj: Object
       },
       data () {
         return {
           childObj: Object.assign({}, this.parentObj)
         }
       }
     }
   </script>
   

3. 父子组件都会修改
   通过 computed 或者 watch 进行处理

   <template>
   	<div>
       <input type="text" v-model="childObj.value">
     </div>
   </template>
   <script>
   	export default {
       name: 'child',
       props: {
         parentObj: Object
       },
       computed: {
         childObj () {
           return Object.assign({}, this.parentObj)
         }
       }
     }
   </script>
   

   或者 watch 方式

   export default {
     name: 'child',
     props: {
       parentObj: Object
     },
     data () {
       return {
         childObj: {}
       }
     },
     watch: {
       parentObj: {
         handler (val, oldVal) {
           if (val) {
             this.childObj = Object.assign({}, this.parentObj)
           }
         },
         deep: true,
         immediate: true
       }
     }
   }
   

   关于 watch 和 computed 区别： vue computed正确使用方式