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都有響應式變化，且在子組件更改數據后，父組件也會發生改變