Vue: объект дважды изменился в компоненте отца, но только один раз вызвал «глубокое наблюдение» в дочернем компоненте - PullRequest
0 голосов
/ 12 апреля 2019

У меня есть вложенные компоненты в моем проекте: и я хочу обмениваться данными между двумя компонентами через объект массива activeGiftList

Представление родительского компонента:

    <div
      id="giftContainer"
      class="giftList"
      @click="hideBoard"
    >
      <template
        v-for="(item, index) in activeGiftList"
      >
        <send-gift-message
          v-if="item"
          :key="item.giftId"
          :gift-item="item"
          :gift-index="index"
          @changeActiveGiftList="changeActiveGiftList"/>
      </template>
    </div>

Отцовский компонент js:

 watch: {
   activeGiftList: {
      handler: function (n) {
        if (n) {
          console.log('father: watch obj', n)
        }
      },
      deep: true
    }
 }

Детский компонент:

  props: {
    giftItem: {
      type: Object,
      default: () => {
        return {}
      }
    },
    giftIndex: {
      type: Number,
      default: 0
    }
  },
  data () {
    return { flag: false }
  },
  watch: {
    giftItem: {
      handler: function (val, oldVal) {
        if (val) {
          this.flag = true
          console.log('child: watch obj', val)
        }
      },
      immediate: true,
      deep: true
    }
  },
  created () {
    console.log(this.flag, 'step 1')
  },
  mounted () {
    console.log(this.flag, 'step 2')
    setTimeout(() => {
      console.log(this.flag, 'step 3')
    }, 500)
  },

Я изменил this.activeGiftList дважды:
first: [] => [{...}] // изменил, опубликовавrequest

second: [{...}] => // использовать find методы массива, чтобы подобрать целевой объект и добавить еще одно свойство к нему, затем использовать $set дляпокройте исходный объект с помощью того же index

здесь console.log результат:

father: watch obj, [{...}]
child: watch obj, {...}
false, step 1
false, step 2
father: watch obj, [{...}] // add one property on it.
true, step 3

Я совершенно сбит с толку, даже если я использовал deep в vue watcherи использование this.$set(this.activeGiftList, 0, newObj) для покрытия исходного объекта в массиве, чтобы вызвать изменение секунд, но все еще не может наблюдать второе изменение в дочернем компоненте.И не может получить изменения из нового свойства в дочернем компоненте DOM.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...