Vue2 props引用传递和值传递响应式变化

值传递

父组件：

<template>
  <div>
    <h1>Parent</h1>
    <button @click="amount++">点击 amount++</button>
    <p>{{amount}}</p>
    <Child :data="amount"></Child>
  </div>
</template>

<script>
import Child from './Child'
export default {
  components: { Child },
  data () {
    return {
      amount: 10
    }
  }
}
</script>

子组件data接没有响应式，props改变子组件接受值不会改变：

export default {
  props: ['data'],
  data () {
    return {
      childValue: this.data
    }
  }
}

用计算属性接收有响应式：

export default {
  props: ['data'],
  computed: {
    computedChildValue () {
      return this.data
    }
  }
}

改变子组件中的值不会对父组件产生影响

引用传递

父组件

<template>
  <div>
    <h1>Parent</h1>
    <button @click="person.name='李四'">点击改名</button>
    <p>{{person.name}}</p>
    <Child :data="person"></Child>
  </div>
</template>

<script>
import Child from './Child'
export default {
  components: { Child },
  data () {
    return {
      person: {
        name: '张三',
        age: 18
      }
    }
  }
}
</script>

子组件：

<template>
  <div>
    <h1>Child</h1>
    <p>data接收：{{childValue.name}}</p>
    <p>computed接收：{{computedChildValue.name}}</p>
    <button @click="childValue.name='王五'">改名王五</button>
    <button @click="computedChildValue.name='赵六'">改名赵六</button>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data () {
    return {
      childValue: this.data
    }
  },
  computed: {
    computedChildValue () {
      return this.data
    }
  }
}
</script>

引用传递，子组件的data和computed都有响应式变化，且在子组件更改数据后，父组件也会发生改变