vue如何修改父組件值

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

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

vue中子組件更改父組件數據

因為vue是單項數據流，所以沒辦法直接在子組件中去修改父組件里面的數據，vue提倡單項數據流，為了防止項目過于復雜時，導致數據流難以理解。引用Vue的官網的話：父系 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外改變父及組件的狀態，從而導致你的應用的數據流向難以理解。所以在項目開發過程中，我們總是通過子組件觸發父組件中方法的方式，通過父組件的方法，更改父組件的數據。

一、props傳遞方法

通過props的方式，將父組件的方法傳遞到子組件，在子組件中通過props接收，可以在當前組件的實例上直接觸發父組件的方法，從而實現子組件更改父組件的值。同事也可以將子組件的數據，以參數的形式發送給父組件。

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

//父組件,設置更改自己數據的方法，將該方法傳遞給子組件
<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接收到的方法和數據，在組件實例上可以直接獲取和觸發
<template>
  <div>
    <h2>我是子組件<button @click="changeFatherData">點我更改父組件數據</button></h2>
    <h2>父組件數據：{{msg}}</h2>
    
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: Number,
    changeMsg:Function
  },
  data(){
    return{
      text:"我是子組件數據，我要發送給父組件",
      num:12
    }
  },
  methods:{
    changeFatherData(){
      this.changeMsg(this.text,this.num)
    }
  },
}
</script>
 
<style scoped>
 
</style>

二、通過this.$emit觸發父組件方法實現

在父組件中自定義一個方法，然后傳遞給子組件，子組件通過this.$emit直接觸發父組件中的數據，實現父子組件通信。子組件觸發事件，父組件監聽事件。

//父組件，將定義的方法傳遞給子元素
<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觸發父組件方法，更改父組件數據，同時可以進行數據傳值
<template>
  <div>
    <h2>我是子組件<button @click="changeFatherData">點我更改父組件數據</button></h2>
    <h2>父組件數據：{{msg}}</h2>
    
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: Number,
  },
  data(){
    return{
      text:"我是子組件數據，我要發送給父組件",
      num:12
    }
  },
  methods:{
    changeFatherData(){
      this.$emit('changeMsg',this.text,this.num)
    }
  },
}
</script>
 
<style scoped>
 
</style>

三、子組件通過this.$parent直接觸發父組件（代碼簡潔，推薦使用）

子組件直接觸發父組件事件，無需進行方法的傳遞、接收，以及事件的定義。

//父組件，聲明需要的方法
<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直接觸發父組件方法
<template>
  <div>
    <h2>我是子組件<button @click="changeFatherData">點我更改父組件數據</button></h2>
    <h2>父組件數據：{{msg}}</h2>
    
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: Number,
  },
  data(){
    return{
      text:"我是子組件數據，我要發送給父組件",
      num:12
    }
  },
  methods:{
    changeFatherData(){
      this.$parent.changeMsg(this.text,this.num)
    }
  },
}
</script>
 
<style scoped>
 
</style>

到此，關于“vue如何修改父組件值”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！