亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vue 自動更新父組件數據的問題

vue 自動更新父組件數據的問題

小唯快跑啊 2019-03-13 13:45:59
我又一個父組件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) }感謝您的關注,謝謝您的回答。
查看完整描述

2 回答

?
大話西游666

TA貢獻1817條經驗 獲得超14個贊

你的子組件與父組件是在一個頁面吧,其實,我們在寫代碼的時候有一個誤區,官方的解釋是子組件不會改變父組件的值,但是前提是你的子組件與父組件不在同一個頁面內寫的,如果在,子組件與父組件關聯的字段也會同步更新,解決的辦法是,你在子組件中接收的時候使用this.table=JSON.parse(JSON.stringify(接收的數據))轉譯一下,個人建議,以后寫組件盡量分開寫。

查看完整回答
反對 回復 2019-03-13
?
德瑪西亞99

TA貢獻1770條經驗 獲得超3個贊

你的this.questionData是不是父組件傳入子組件的
如果是那就是引用傳值,引用傳值是會同步更新的
樓上這種深度克隆的方法可以解決這個問題

查看完整回答
反對 回復 2019-03-13
  • 2 回答
  • 0 關注
  • 778 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號