Vue.js - как передать нереактивные данные дочерним компонентам

Я знаю, что мы можем передавать данные дочерним компонентам через Реквизит. Но он является реактивным в режиме одностороннего потока данных. Если значение данных изменяется в Родительский компонент, это также влияет (обновляет) на props в Дочерний компонент.

В моем случае я не хочу получать обновления по конкретной опоре в Дочерний компонент, даже если эти данные в Родительский компонент изменены. Это потому, что Дочерний компонент отвечает только за отображение данных. Но данные в Родительский компонент по-прежнему должны быть реактивный в Родительская область.

Я читал форум статья, который предлагает использовать как Json. Я считаю, что это немного грязно, и данные в моем случае - это всего лишь один string.

Есть ли способы достичь такого решения?

4
0
2 230
3

Ответы 3

Может ты сможешь проверить это

VueJS визуализирует один раз в элемент

используйте v-once на своем дочернем компоненте

Вы можете скопировать реактивную опору в созданный хук дочернего компонента. Копия не будет реактивной, например.

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

Примечание: способ копирования реактивного свойства будет зависеть от типа данных, способ, который я показал, будет работать для объектов.

Я считаю необходимым упомянуть, что в вашем примере, если этот объект содержит непримитивное значение, его изменение приведет к изменению опоры.

Steven B. 10.09.2018 23:11

Могу я попросить вас взглянуть на вопрос Vue.JS, связанный с исходным кодом в github книги Антона Гора «Full-Stack Vue.js 2 и Laravel 5» здесь: stackoverflow.com/questions/59245577/…? В частности, обратите внимание на раздел EDIT: OP.

Istiaque Ahmed 13.12.2019 12:25

Используйте свойство в качестве свойства данных в дочернем компоненте. см. ссылку на скрипку:

ссылка здесь

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

Другие вопросы по теме