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

Question

我知道我们可以通过 Props 将数据传递给子组件.但它在单向数据流模式下是被动的。如果数据的值在父组件中发生变化，它也会对子组件中的props产生影响(更新)。

在我的例子中，我不想在 子组件 中获取特定 Prop 的更新，即使 父组件 中的数据已更改。因为子组件只负责显示数据。但是Parent Component中的数据在Parent Scope中仍然必须是reactive。

我读过一些论坛article建议像 Json 一样使用。我觉得这有点脏，在我的例子中数据只是一个 string。

有没有办法实现这种解决方案？

Answer 1

您可以在子组件的 created 钩子(Hook)中复制 reactive prop。该副本不会是 react 性的，例如

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

注意:复制响应式 prop 的方式取决于数据类型，我展示的方式适用于对象。