這篇文章主要介紹“vue如何修改父組件值”，在日常操作中，相信很多人在vue如何修改父組件值問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue如何修改父組件值”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

10年積累的成都做網(wǎng)站、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有河津免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

vue修改父組件值的方法：1、通過props的方式，將父組件的方法傳遞到子組件，在子組件中通過props接收；2、通過“this.$emit”觸發(fā)父組件方法實(shí)現(xiàn)修改；3、通過“this.$parent”直接觸發(fā)父組件修改即可。

vue中子組件更改父組件數(shù)據(jù)

因?yàn)関ue是單項(xiàng)數(shù)據(jù)流，所以沒辦法直接在子組件中去修改父組件里面的數(shù)據(jù)，vue提倡單項(xiàng)數(shù)據(jù)流，為了防止項(xiàng)目過于復(fù)雜時(shí)，導(dǎo)致數(shù)據(jù)流難以理解。引用Vue的官網(wǎng)的話：父系 prop 的更新會(huì)向下流動(dòng)到子組件中，但是反過來則不行。這樣會(huì)防止從子組件意外改變父及組件的狀態(tài)，從而導(dǎo)致你的應(yīng)用的數(shù)據(jù)流向難以理解。所以在項(xiàng)目開發(fā)過程中，我們總是通過子組件觸發(fā)父組件中方法的方式，通過父組件的方法，更改父組件的數(shù)據(jù)。

一、props傳遞方法

通過props的方式，將父組件的方法傳遞到子組件，在子組件中通過props接收，可以在當(dāng)前組件的實(shí)例上直接觸發(fā)父組件的方法，從而實(shí)現(xiàn)子組件更改父組件的值。同事也可以將子組件的數(shù)據(jù)，以參數(shù)的形式發(fā)送給父組件。

由于代碼不多，就暫且全部展示，僅需關(guān)心相關(guān)事件就可以

//父組件,設(shè)置更改自己數(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ù)，在組件實(shí)例上可以直接獲取和觸發(fā)
<template>
  <div>
    <h2>我是子組件<button @click="changeFatherData">點(diǎn)我更改父組件數(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ā)父組件方法實(shí)現(xiàn)

在父組件中自定義一個(gè)方法，然后傳遞給子組件，子組件通過this.$emit直接觸發(fā)父組件中的數(shù)據(jù)，實(shí)現(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ìn)行數(shù)據(jù)傳值
<template>
  <div>
    <h2>我是子組件<button @click="changeFatherData">點(diǎn)我更改父組件數(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ā)父組件（代碼簡(jiǎn)潔，推薦使用）

子組件直接觸發(fā)父組件事件，無需進(jìn)行方法的傳遞、接收，以及事件的定義。

//父組件，聲明需要的方法
<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">點(diǎn)我更改父組件數(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>

到此，關(guān)于“vue如何修改父組件值”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

新聞名稱：vue如何修改父組件值
文章鏈接：http://jinyejixie.com/article34/jojjpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、關(guān)鍵詞優(yōu)化、電子商務(wù)、小程序開發(fā)、網(wǎng)站導(dǎo)航、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)