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

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

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

ссылка здесь

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

Answer 3

Может быть, вы можете проверить это

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

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