通常子組件更新某個(gè)變量并需要告知父組件時(shí)澎胡，需要子組件on監(jiān)聽(tīng)該事件再去改變值娩鹉。
但是熟悉 v-model 的雙向數(shù)據(jù)綁定原理后攻谁，我們可以巧妙地運(yùn)用這一原理去實(shí)現(xiàn)父子組件之間動(dòng)態(tài)傳值
方法總結(jié)：
父組件通過(guò)v-model綁定一個(gè)變量傳給子組件
子組件通過(guò)props['value']接收
子組件通過(guò)$emit('input',XX）去改變父組件中v-model綁定的變量
例子：
<!--子組件-->
<template>
<div>
<div v-show="isShow">{{value}}</div>
<Button @click="hide">隱藏</Button>
</div>
</template>
<script>
export default {
props:['value'],
data() {
return {
isShow: this.value
}
},
methods: {
hide() {
this.isShow = false,
$emit('input',false)
}
}
}
</script>
<!--父組件-->
<template>
<AddModal ref="addModal" v-model="showModal" />
<Button @click="showModal">顯示</Button>
</template>
<script>
import AddModal from '../addModal';
export default {
components: {
AddModal
},
data() {
return {
showModal: false
}
},
methods: {
showModal() {
this.showMal: true
}
},
}
</script>
文章每周持續(xù)更新，可以微信搜索「 前端大集錦 」第一時(shí)間閱讀弯予，回復(fù)【視頻】【書(shū)籍】領(lǐng)取200G視頻資料和30本PDF書(shū)籍資料
