猿问

vue 自动更新父组件数据的问题

我又一个父组件A和一个子组件B
父组件代码

<div class="item-content">
<Button
  style="height:40px;"
  type="dashed"
  icon="ios-add"
  @click="addQuestion">添加问题</Button>
<choose-question
  ref="choosequestion"
  :showchoosequestion="showChooseQuestion"
  :cancelquestion="cancelQuestionId"
  @questionlist="getQuestionList"
  @cancel="addQuestionCancel" />
<div class="question">
  <span
    v-for="item in addedQuestionList"
    :key="item.id"><em>{{ item.title }}</em>
    <Icon
      type="ios-close"
      color="#666666"
      @click="cancelQuestion(item.id)" />
  </span>
</div>
  </div>

子组件choose-question中 是一个iview的table组件 全选表格所有项目并且点击确定的时候会触发questionlist方法 同时把选中的数据传给父组件,父组件更新 addedQuestionList 的值 从而循环展示出来选择的数据。但是现在我只触发全选的时候 父组件就更新了 addedQuestionList 的值 并没有点确定,全选事件里并没有触发questionlist方法,为什么父组件的addedQuestionList值就被改变了?我跟了断点 看到 vue自己执行了 watch.run方法后 数据就变了,可我也没有 watch addedQuestionList这个方法。
子组件触发全选代码

select (selection) {  this.questionData.push(...selection)  const obj = {}  const l = this.questionData.reduce((cur, item, index) => {  if (!obj[item.id]) {
     obj[item.id] = true
     cur.push(item)
   }  return cur
  }, [])  this.questionData = l
}

子组件点击确定代码

ok () {  this.$emit('questionlist', this.questionData)  this.$emit('cancel', false)
}

感谢您的关注,谢谢您的回答。


小唯快跑啊
浏览 737回答 2
2回答

大话西游666

你的子组件与父组件是在一个页面吧,其实,我们在写代码的时候有一个误区,官方的解释是子组件不会改变父组件的值,但是前提是你的子组件与父组件不在同一个页面内写的,如果在,子组件与父组件关联的字段也会同步更新,解决的办法是,你在子组件中接收的时候使用this.table=JSON.parse(JSON.stringify(接收的数据))转译一下,个人建议,以后写组件尽量分开写。

德玛西亚99

你的this.questionData是不是父组件传入子组件的如果是那就是引用传值,引用传值是会同步更新的楼上这种深度克隆的方法可以解决这个问题
随时随地看视频慕课网APP

相关分类

Vue.js
我要回答