У меня есть вложенные компоненты в моем проекте: и я хочу обмениваться данными между двумя компонентами через объект массива 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.
Также я пробовал изменить свойство существующего для того же объекта, и дочерний компонент, кажется, изменяется так же, как и родительский компонент. Есть ли хорошие идеи?помочь мне решить эту проблему?