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

最新推荐文章于 2026-07-28 16:37:52 发布

转载最新推荐文章于 2026-07-28 16:37:52 发布 · 1.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://www.cnblogs.com/simdot/p/14843213.html

本文通过Vue实例展示了值传递和引用传递的区别。值传递中，父组件向子组件传递基本类型数据时，子组件的变化不会影响父组件；而引用传递中，传递的是对象的引用，子组件对数据的修改会同步到父组件。

值传递

父组件：

<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都有响应式变化，且在子组件更改数据后，父组件也会发生改变

标签