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.js影片教學》
以上是vue怎麼修改父元件值的詳細內容。更多資訊請關注PHP中文網其他相關文章！
