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接收，可以在目前元件的實例上直接觸發父元件的方法，從而實作子元件更改父元件的值。同事也可以將子組件的數據，以參數的形式傳送給父組件。

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

//父组件,设置更改自己数据的方法，将该方法传递给子组件

 

 
 
 
//子组件，接收父组件传递过来的方法，通过props接收到的方法和数据，在组件实例上可以直接获取和触发

 

 

二、透過this.$emit觸發父元件方法實作

        在父元件中自訂一個方法，然後傳遞給子元件，子元件透過this.$emit直接觸發父元件中的數據，實現父子元件通訊。子組件觸發事件，父組件監聽事件。

//父组件，将定义的方法传递给子元素

 

 
 
//子组件，通过this.$emit触发父组件方法，更改父组件数据，同时可以进行数据传值

 

 

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

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

//父组件，声明需要的方法

 

 
 
//子组件，this.$parent直接触发父组件方法

 

 

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

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