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 &#39;@/components/HelloWorld.vue&#39;
 
export default {
  name: &#39;Home&#39;,
  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: &#39;HelloWorld&#39;,
  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 &#39;@/components/HelloWorld.vue&#39;
 
export default {
  name: &#39;Home&#39;,
  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: &#39;HelloWorld&#39;,
  props: {
    msg: Number,
  },
  data(){
    return{
      text:"我是子组件数据，我要发送给父组件",
      num:12
    }
  },
  methods:{
    changeFatherData(){
      this.$emit(&#39;changeMsg&#39;,this.text,this.num)
    }
  },
}
</script>
 
<style scoped>
 
</style>

三、子元件透過this.$parent直接觸發父元件（程式碼簡潔，建議使用）

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

//父组件，声明需要的方法
<template>
  <div>
    <h1>我是父组件</h1>
    <HelloWorld :msg="msg"/>
  </div>
</template>
 
<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
 
export default {
  name: &#39;Home&#39;,
  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: &#39;HelloWorld&#39;,
  props: {
    msg: Number,
  },
  data(){
    return{
      text:"我是子组件数据，我要发送给父组件",
      num:12
    }
  },
  methods:{
    changeFatherData(){
      this.$parent.changeMsg(this.text,this.num)
    }
  },
}
</script>
 
<style scoped>
 
</style>

推薦學習：《vue.js影片教學》

以上是vue怎麼修改父元件值的詳細內容。更多資訊請關注PHP中文網其他相關文章！