Question

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

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

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

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

Answer 1

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

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

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

Answer 2

也许您可以检查一下

VueJS render once into an element

在子组件上使用v-once

Answer 3

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

link here

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

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

3 个答案: