Блог

avatarid и relationlist передаются от родителя, когда загружается изображение, аватарид изменяется, но аватарид будет сброшен до исходного, если список отношений изменен (добавление или удаление элемента из компонента RelationTable).

Я думаю, что это связано с тем, что RelationTable повторная передача приводит к перезагрузке родителя. Как я могу остановить такой сброс при обновлении дочернего компонента. Спасибо.

 <template>

    <el-upload
      class="avatar-uploader"
      action
      :http-request="uploadAvatar"
      accept="image/jpeg,image/jpg,image/png"
      :after-upload="uploadAvatarSucc"
    >
    <RelationTable ref="relationTable" :relationlist="relationlist" @delete="removeRelation" />

</template>

export default {
  name: 'relation-component',
  props: {
    avatarid: {
      type: String,
      default: ''
    },
    relationlist: {
      type: Array,
      default: null
    }
  },
  methods: {
    uploadAvatarSucc(res) {
      this.avatarid = res.imageId
    },
    removeRelation(index) {
      if (this.relationlist.length > 0) {
        this.relationlist.splice(index, 1)
      }
    }
  }
}
 

Вы не можете остановить это — в Vue реквизиты являются только односторонним потоком данных. Если вы откроете инструменты разработки браузера, вы увидите сообщение об ошибке от Vue, в котором говорится именно об этом.

Изменение relationlist вида работает, потому что вы обновляете массив на месте (изменяя существующий экземпляр вместо его замены ….что невозможно с помощью чисел и т. Д.), Но если вы попробуете что-то еще (например, создадите новый массив с фильтром), Он тоже перестанет работать.

Единственный правильный способ обойти это-создать событие и позволить родительскому компоненту (владельцу данных) вносить изменения (google «поддерживает события»). Это, конечно, становится все сложнее и сложнее по мере увеличения глубины дерева компонентов и расстояния между владельцем данных и дочерним компонентом. И это одна из причин, по которой существуют такие глобальные инструменты управления государством, как Vuex….

Другой способ-передать данные с помощью одной опоры типа Object. Пока вы изменяете только свойства объекта (не заменяя сам объект), он будет работать. Но это не рекомендуется и считается анти-шаблоном…