這篇文章主要介紹“vue如何修改父組件值”,在日常操作中,相信很多人在vue如何修改父組件值問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vue如何修改父組件值”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
10年積累的成都做網(wǎng)站、成都網(wǎng)站建設經(jīng)驗,可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你,你也不認識我。但先網(wǎng)站設計后付款的網(wǎng)站建設流程,更有河津免費網(wǎng)站建設讓你可以放心的選擇與我們合作。
vue修改父組件值的方法:1、通過props的方式,將父組件的方法傳遞到子組件,在子組件中通過props接收;2、通過“this.$emit”觸發(fā)父組件方法實現(xiàn)修改;3、通過“this.$parent”直接觸發(fā)父組件修改即可。
vue中子組件更改父組件數(shù)據(jù)
因為vue是單項數(shù)據(jù)流,所以沒辦法直接在子組件中去修改父組件里面的數(shù)據(jù),vue提倡單項數(shù)據(jù)流,為了防止項目過于復雜時,導致數(shù)據(jù)流難以理解。引用Vue的官網(wǎng)的話:父系 prop 的更新會向下流動到子組件中,但是反過來則不行。這樣會防止從子組件意外改變父及組件的狀態(tài),從而導致你的應用的數(shù)據(jù)流向難以理解。所以在項目開發(fā)過程中,我們總是通過子組件觸發(fā)父組件中方法的方式,通過父組件的方法,更改父組件的數(shù)據(jù)。
一、props傳遞方法
通過props的方式,將父組件的方法傳遞到子組件,在子組件中通過props接收,可以在當前組件的實例上直接觸發(fā)父組件的方法,從而實現(xiàn)子組件更改父組件的值。同事也可以將子組件的數(shù)據(jù),以參數(shù)的形式發(fā)送給父組件。
由于代碼不多,就暫且全部展示,僅需關心相關事件就可以
//父組件,設置更改自己數(shù)據(jù)的方法,將該方法傳遞給子組件
<template>
<div>
<h2>我是父組件</h2>
<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>
//子組件,接收父組件傳遞過來的方法,通過props接收到的方法和數(shù)據(jù),在組件實例上可以直接獲取和觸發(fā)
<template>
<div>
<h2>我是子組件<button @click="changeFatherData">點我更改父組件數(shù)據(jù)</button></h2>
<h2>父組件數(shù)據(jù):{{msg}}</h2>
</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>
二、通過this.$emit觸發(fā)父組件方法實現(xiàn)
在父組件中自定義一個方法,然后傳遞給子組件,子組件通過this.$emit直接觸發(fā)父組件中的數(shù)據(jù),實現(xiàn)父子組件通信。子組件觸發(fā)事件,父組件監(jiān)聽事件。
//父組件,將定義的方法傳遞給子元素
<template>
<div>
<h2>我是父組件</h2>
<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>
//子組件,通過this.$emit觸發(fā)父組件方法,更改父組件數(shù)據(jù),同時可以進行數(shù)據(jù)傳值
<template>
<div>
<h2>我是子組件<button @click="changeFatherData">點我更改父組件數(shù)據(jù)</button></h2>
<h2>父組件數(shù)據(jù):{{msg}}</h2>
</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>
三、子組件通過this.$parent直接觸發(fā)父組件(代碼簡潔,推薦使用)
子組件直接觸發(fā)父組件事件,無需進行方法的傳遞、接收,以及事件的定義。
//父組件,聲明需要的方法
<template>
<div>
<h2>我是父組件</h2>
<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>
<h2>我是子組件<button @click="changeFatherData">點我更改父組件數(shù)據(jù)</button></h2>
<h2>父組件數(shù)據(jù):{{msg}}</h2>
</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>
到此,關于“vue如何修改父組件值”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關知識,請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
新聞名稱:vue如何修改父組件值
文章鏈接:http://muchs.cn/article34/jojjpe.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供用戶體驗、關鍵詞優(yōu)化、電子商務、小程序開發(fā)、網(wǎng)站導航、全網(wǎng)營銷推廣
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)