vue prop属性传值与传引用示例

Vue.js 是一款流行的前端框架，它允许开发者通过组件化的方式构建复杂的用户界面。在 Vue 组件间通信中，`prop` 是一种常见的数据传递机制，主要用于父组件向子组件传递数据。本文将深入探讨 Vue prop 的属性传值与传引用，并提供一个实际的示例来帮助理解。 我们要明确 `prop` 的数据类型决定了它是如何传递的。Vue 有五种基本类型的 `prop`： 1. **字符串（String）** 2. **数字（Number）** 3. **布尔值（Boolean）** 4. **对象（Object）** 5. **数组（Array）** 对于这些基本类型，Vue 默认采用**传值**的方式，这意味着当你在子组件中修改 `prop` 的值时，不会影响到父组件的数据。这是因为 Vue 使用了数据响应式系统，当父组件的数据改变时，会触发视图的更新，而子组件无法直接改变父组件的状态。 然而，当 `prop` 的类型为 `Object` 或 `Array` 时，情况有所不同。由于 JavaScript 中对象和数组是引用类型，传入子组件的 `prop` 实际上传递的是指向原始数据的引用。这意味着，如果在子组件中直接修改这些 `prop`，将会直接影响到父组件的状态，这通常不是我们所期望的行为。 为了在传递对象或数组时避免这种副作用，可以采取以下策略： ```html <!-- 父组件 Component-A --> <component-B :person="personList" :personBak="person_Bak"></component-B> // 父组件 Component-A 部分关键代码 data() { return { personList: [{ name: 'Alice' }, { name: 'Bob' }], person_Bak: null, }; }, mounted() { this.person_Bak = JSON.parse(JSON.stringify(this.personList)); } ``` 在这个例子中，`personList` 是一个对象数组，我们希望将其以值的形式传递给子组件 `Component-B`，而不是引用。为了达到这个目的，我们在 `mounted` 生命周期钩子中使用 `JSON.parse` 和 `JSON.stringify` 将 `personList` 复制成一个新的对象 `person_Bak`。这样，`person` 和 `personBak` 虽然内容相同，但它们在内存中是两个不同的对象，修改其中一个不会影响另一个。 在子组件 `Component-B` 中，我们需要声明对应的 `props`： ```js // Component-B props 部分 props: { person: { type: Object, default: () => ({}), }, personBak: { type: Object, default: () => ({}), }, }, ``` 这样，即使在子组件中修改 `person` 或 `personBak`，也不会影响到父组件的 `personList`。请注意，这里使用了箭头函数作为默认值的提供商，以确保每次创建新组件实例时都返回一个新的对象。 总结一下，Vue 中的 `prop` 通常以值的形式传递基本类型数据，而对于对象和数组这类引用类型，可以通过复制数据来实现“值传递”的效果，防止子组件意外修改父组件的状态。在实际开发中，理解并正确使用 `prop` 的传值和传引用机制，对于维护应用状态的一致性和可预测性至关重要。