站長(zhǎng)資訊網(wǎng)
vue修改父組件值的方法：1、通過(guò)props的方式，將父組件的方法傳遞到子組件，在子組件中通過(guò)props接收；2、通過(guò)“this.$emit”觸發(fā)父組件方法實(shí)現(xiàn)修改；3、通過(guò)“this.$parent”直接觸發(fā)父組件修改即可。
本教程操作環(huán)境：Windows10系統(tǒng)、Vue 3版、Dell G3電腦。
vue怎么修改父組件值？
vue中子組件更改父組件數(shù)據(jù)
因?yàn)関ue是單項(xiàng)數(shù)據(jù)流，所以沒(méi)辦法直接在子組件中去修改父組件里面的數(shù)據(jù)，vue提倡單項(xiàng)數(shù)據(jù)流，為了防止項(xiàng)目過(guò)于復(fù)雜時(shí)，導(dǎo)致數(shù)據(jù)流難以理解。引用Vue的官網(wǎng)的話：父系 prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過(guò)來(lái)則不行。這樣會(huì)防止從子組件意外改變父及組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。所以在項(xiàng)目開(kāi)發(fā)過(guò)程中，我們總是通過(guò)子組件觸發(fā)父組件中方法的方式，通過(guò)父組件的方法，更改父組件的數(shù)據(jù)。
一、props傳遞方法
通過(guò)props的方式，將父組件的方法傳遞到子組件，在子組件中通過(guò)props接收，可以在當(dāng)前組件的實(shí)例上直接觸發(fā)父組件的方法，從而實(shí)現(xiàn)子組件更改父組件的值。同事也可以將子組件的數(shù)據(jù)，以參數(shù)的形式發(fā)送給父組件。
由于代碼不多，就暫且全部展示，僅需關(guān)心相關(guān)事件就可以
//父組件,設(shè)置更改自己數(shù)據(jù)的方法，將該方法傳遞給子組件 <template> <div> <h1>我是父組件</h1> <HelloWorld :msg="msg" :changeMsg="changeMsg"/> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { HelloWorld }, methods:{ changeMsg(text,num){ console.log(text,num); this.msg=this.msg+1 } }, data(){ return{ msg:1 } } } </script> //子組件，接收父組件傳遞過(guò)來(lái)的方法，通過(guò)props接收到的方法和數(shù)據(jù)，在組件實(shí)例上可以直接獲取和觸發(fā) <template> <div> <h1>我是子組件<button @click="changeFatherData">點(diǎn)我更改父組件數(shù)據(jù)</button></h1> <h1>父組件數(shù)據(jù)：{{msg}}</h1> </div> </template> <script> export default { name: 'HelloWorld', props: { msg: Number, changeMsg:Function }, data(){ return{ text:"我是子組件數(shù)據(jù)，我要發(fā)送給父組件", num:12 } }, methods:{ changeFatherData(){ this.changeMsg(this.text,this.num) } }, } </script> <style scoped> </style>
二、通過(guò)this.$emit觸發(fā)父組件方法實(shí)現(xiàn)
在父組件中自定義一個(gè)方法，然后傳遞給子組件，子組件通過(guò)this.$emit直接觸發(fā)父組件中的數(shù)據(jù)，實(shí)現(xiàn)父子組件通信。子組件觸發(fā)事件，父組件監(jiān)聽(tīng)事件。
//父組件，將定義的方法傳遞給子元素 <template> <div> <h1>我是父組件</h1> <HelloWorld :msg="msg" @changeMsg="changeMsg"/> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { HelloWorld }, methods:{ changeMsg(text,num){ console.log(text,num); this.msg=this.msg+1 } }, data(){ return{ msg:1 } } } </script> //子組件，通過(guò)this.$emit觸發(fā)父組件方法，更改父組件數(shù)據(jù)，同時(shí)可以進(jìn)行數(shù)據(jù)傳值 <template> <div> <h1>我是子組件<button @click="changeFatherData">點(diǎn)我更改父組件數(shù)據(jù)</button></h1> <h1>父組件數(shù)據(jù)：{{msg}}</h1> </div> </template> <script> export default { name: 'HelloWorld', props: { msg: Number, }, data(){ return{ text:"我是子組件數(shù)據(jù)，我要發(fā)送給父組件", num:12 } }, methods:{ changeFatherData(){ this.$emit('changeMsg',this.text,this.num) } }, } </script> <style scoped> </style>
三、子組件通過(guò)this.$parent直接觸發(fā)父組件（代碼簡(jiǎn)潔，推薦使用）
子組件直接觸發(fā)父組件事件，無(wú)需進(jìn)行方法的傳遞、接收，以及事件的定義。
//父組件，聲明需要的方法 <template> <div> <h1>我是父組件</h1> <HelloWorld :msg="msg"/> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { HelloWorld }, methods:{ changeMsg(text,num){ console.log(text,num); this.msg=this.msg+1 } }, data(){ return{ msg:1 } } } </script> //子組件，this.$parent直接觸發(fā)父組件方法 <template> <div> <h1>我是子組件<button @click="changeFatherData">點(diǎn)我更改父組件數(shù)據(jù)</button></h1> <h1>父組件數(shù)據(jù)：{{msg}}</h1> </div> </template> <script> export default { name: 'HelloWorld', props: { msg: Number, }, data(){ return{ text:"我是子組件數(shù)據(jù)，我要發(fā)送給父組件", num:12 } }, methods:{ changeFatherData(){ this.$parent.changeMsg(this.text,this.num) } }, } </script> <style scoped> </style>
推薦學(xué)習(xí)：《vue.js視頻教程》
