vue怎麼修改父元件值

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

本教學操作環境：Windows10系統、Vue 3版、Dell G3電腦。

vue怎麼修改父元件值？

vue中子元件更改父元件資料

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

一、props傳遞方法

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

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

//父元件,設定更改自己資料的方法，將該方法傳遞給子元件
<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>
 
 
 
//子元件，接收父元件傳遞過來的方法，通過props接收到的方法和資料，在元件範例上可以直接獲取和觸發
<template>
  <div>
    <h1>我是子元件<button @click="changeFatherData">點我更改父元件資料</button></h1>
    <h1>父元件資料：{{msg}}</h1>
    
  </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>
    <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>
 
 
//子元件，通過this.$emit觸發父元件方法，更改父元件資料，同時可以進行資料傳值
<template>
  <div>
    <h1>我是子元件<button @click="changeFatherData">點我更改父元件資料</button></h1>
    <h1>父元件資料：{{msg}}</h1>
    
  </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>
    <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直接觸發父元件方法
<template>
  <div>
    <h1>我是子元件<button @click="changeFatherData">點我更改父元件資料</button></h1>
    <h1>父元件資料：{{msg}}</h1>
    
  </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怎麼修改父元件值的詳細內容，更多請關注TW511.COM其它相關文章！