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

【问题标题】：Vue.js - How to pass non-reactive data to child componentsVue.js - 如何将非反应性数据传递给子组件
【发布时间】：2019-02-14 13:03:09
【问题描述】：

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

就我而言，我不想更新 子组件 中的特定道具，即使 父组件 中的数据已更改。这是因为子组件只负责显示数据。但是 Parent Component 中的数据仍然必须在 Parent Scope 中reactive。

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

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

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

您可以在子组件的 created 钩子中复制反应性道具。副本不会是被动的，例如

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

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

【讨论】：

我觉得有必要在您的示例中提到，如果该对象包含非原始值，则修改它会修改道具。
我想请你看一下 Anthone Gore 的《全栈 Vue.js 2 和 Laravel 5》一书的 github 中的源代码相关的 Vue.JS 问题：@ 987654321@ ?特别看看 OP 的 EDIT: 部分。

【解决方案2】：

也许你可以检查一下这个

VueJS render once into an element

在您的子组件上使用v-once

【讨论】：

【解决方案3】：

在子组件中使用 prop 作为数据属性。请看小提琴链接：

link here

Vue.component('greeting', {
  props: ['user'],
  data:function(){
    return {
      newuser:this.user
    }
  },
  template: '<h1>hi {{ newuser }}</h1>'
});

【讨论】：