Vue.js-如何将非反应性数据传递给子组件

Question

我知道我们可以通过Props将数据传递给子组件。但是它在单向数据流模式下是反应性的。如果在“ 父级”组件中更改了数据的值，则props在“ 子级”组件中也会影响（更新）。

就我而言，即使父组件中的数据已更改，我也不想在子组件中的特定道具上获得更新。这是因为Child组件仅负责显示数据。但是父级组件中的数据在父级范围中仍然必须是反应性的。

我读过一些论坛文章，建议像Json一样使用。我觉得这是一种肮脏的方式，在我的情况下，数据只是其中一种string。

反正有实现这种解决方案的方法吗？

Answer 1

您可以将反应式道具复制到子组件的创建的挂钩中。该副本将是无反应的，例如

export default {
  props: {
    reactive: Object
  },
  data: () => ({
    nonreactive: null
  }),
  created() {
    this.nonreactive = Object.assign({}, this.reactive)
  }
}

注意：复制反应式道具的方式取决于数据类型，我展示的方式适用于对象。