我又一個(gè)父組件A和一個(gè)子組件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中 是一個(gè)iview的table組件 全選表格所有項(xiàng)目并且點(diǎn)擊確定的時(shí)候會(huì)觸發(fā)questionlist方法 同時(shí)把選中的數(shù)據(jù)傳給父組件,父組件更新 addedQuestionList 的值 從而循環(huán)展示出來選擇的數(shù)據(jù)。但是現(xiàn)在我只觸發(fā)全選的時(shí)候 父組件就更新了 addedQuestionList 的值 并沒有點(diǎn)確定,全選事件里并沒有觸發(fā)questionlist方法,為什么父組件的addedQuestionList值就被改變了?我跟了斷點(diǎn) 看到 vue自己執(zhí)行了 watch.run方法后 數(shù)據(jù)就變了,可我也沒有 watch addedQuestionList這個(gè)方法。子組件觸發(fā)全選代碼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
}子組件點(diǎn)擊確定代碼ok () { this.$emit('questionlist', this.questionData) this.$emit('cancel', false)
}感謝您的關(guān)注,謝謝您的回答。
2 回答

大話西游666
TA貢獻(xiàn)1817條經(jīng)驗(yàn) 獲得超14個(gè)贊
你的子組件與父組件是在一個(gè)頁面吧,其實(shí),我們?cè)趯懘a的時(shí)候有一個(gè)誤區(qū),官方的解釋是子組件不會(huì)改變父組件的值,但是前提是你的子組件與父組件不在同一個(gè)頁面內(nèi)寫的,如果在,子組件與父組件關(guān)聯(lián)的字段也會(huì)同步更新,解決的辦法是,你在子組件中接收的時(shí)候使用this.table=JSON.parse(JSON.stringify(接收的數(shù)據(jù)))轉(zhuǎn)譯一下,個(gè)人建議,以后寫組件盡量分開寫。

德瑪西亞99
TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
你的this.questionData是不是父組件傳入子組件的
如果是那就是引用傳值,引用傳值是會(huì)同步更新的
樓上這種深度克隆的方法可以解決這個(gè)問題
添加回答
舉報(bào)
0/150
提交
取消