vue父子通信，子组件有了props 为什么还要在data里定义新的变量，如下代码

Question

父

<template>
  <div>
    <test3-a :value="value"
             @input="handleChange"></test3-a>
  </div>
</template>
<script>
import test3A from '../components/test3-a.vue'

export default {
  components: { test3A },
  data () {
    return {
      value: 1
    }
  },
  methods: {
    handleChange (val) {
      this.value = parseInt(val)
    }
  }
}
</script>

子

<template>
  <div>
    <button @click="increase(-1)">减1</button>
    <span> {{currentValue}} </span>
    <button @click="increase(1)">加1</button>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Number
    }
  },
  data () {
    return {
      currentValue: this.value
    }
  },
  methods: {
    increase (val) {
      this.currentValue = this.value + val
      this.$emit('input', this.currentValue)
    }
  }
}
</script>

Answer 1

props不支持直接修改

Answer 2

要理解本质，本地新建一个属性存储的本质是什么？是值的私有化，私有化的结果就是1.你可以随意操控这个值而不影响父组件，如果传过来是引用的话，是会污染父组件的值的，所以建议做深拷贝，2.父组件传进来之后下下次进来就需要watch来监听props.value的变化，为什么这样，就是因为私有化之后你与父级的value的唯一关系断裂了。所以这个需要看场景选择是否需要私有化， 如果子组件非常依赖父组件的值，而且子组件内部根本不需要对这个值来做处理。那么直接可以使用props里面的属性。反过来，就需要私有化和watch来兼容外部变化和内部使用。

Answer 3

可以不用定义新变量：

<span> {{value}} </span>
//...
this.$emit('input', this.value + val)

Answer 4

子组件的props 接收到的 value 是不可以变更值的。会报错的。
所以需要再重新赋值，才可以在子组件里面操作使用。

Answer 5

直接改父级的value值

子

<template>
  <div>
    <button @click="increase(-1)">减1</button>
    <span> {{value}} </span>
    <button @click="increase(1)">加1</button>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Number
    }
  },
  methods: {
    increase (val) {
      this.$parent.value + val
    }
  }
}
</script>

Answer 6

你就当作 props 里的是一个默认值，，，但是 props 又不能直接修改，，，所以再定义一个 data，，

比如 props 叫 defaultValue，data 里叫 value，

或者 props 叫 value，data 里叫 realValue，，，

很多这种搞法，，

Answer 7

父子组件之间传递值是单向数据流的,这样理解就OK了

Answer 8

避免污染父组件，单向数据流更好维护