VUE 子组件向父组件发消息,父组件数据同步

今天在写https://fileup.dev/imgtest 的时候遇到了个问题:

代码

明明我的子组件没有发送消息,为什么父组件数据同步了

<div class="dataBox dataDiv">
  <div v-for="(item, index) in filteredData" :key="index" :class="{ 'shadow dataContent': true, 'dataContentActive': initialData.includes(item) }" @click="selectItem(index, item)" :index="index">
   <span>{{ item.name }}</span>
  </div>
</div>

<button type="button" class="btn btn-primary" @click="$emit('selected-indexes', initialData)">对比</button>

这是一段会根据filteredData数据生成元素的代码,其中里面有一个点击事件

@click=”selectItem(index, item)

这个点击事件触发时会将当前的item参数,push到initialData这个数组里。

最下面的按钮是向父组件发送消息的,点击这个按钮就会向父组件发送initialData的数据

bug出现了

然后bug就出现了,只要我点击过一次button后,再去dataBox 里点那些div触发他们的点击事件。父组件的事件也同步更新了。

why?明明就没有点击按钮没有触发,发送消息的事件。只是在点击那些div为什么会这样?

解决办法

网络上查到的消息是:Vue.js的响应性行为有关。当使用$emitinitialData数组传递给父组件时,父组件接收到的是对同一个数组的引用,这时他们的数据就绑定在一起了,子组件改变父组件也改变。

所以只要让发送消息的数据和initialData 不等于,不等于,不等于就可以了

<button type="button" class="btn btn-primary" @click="sendSelectedIndexes">对比</button>

export default {
  data() {
    return {
      initialData: [],
    };
  },
  methods: {
    sendSelectedIndexes() {
      const initialDataCopy = [...this.initialData]; // 复制数组
      this.$emit('selected-indexes', initialDataCopy);
    },
  },
};

评论

  1. Brynn4587
    Windows Chrome 120.0.0.0
    1周前
    2024-2-15 19:10:08

    Мадонна, икона поп-музыки и культурного влияния, продолжает вдохновлять и поражать своей музыкой и стилем. Её карьера олицетворяет смелость, инновации и постоянное стремление к самовыражению. Среди её лучших песен можно выделить “Like a Prayer”, “Vogue”, “Material Girl”, “Into the Groove” и “Hung Up”. Эти треки не только доминировали на музыкальных чартах, но и оставили неизгладимый след в культурной и исторической панораме музыки. Мадонна не только певица, но и икона стиля, актриса и предприниматель, чье влияние простирается далеко за рамки музыкальной индустрии. Скачать mp3 музыку 2024 года и слушать онлайн бесплатно.

  2. Ellis1350
    Windows Chrome 120.0.0.0
    2天前
    2024-2-23 13:50:45

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇