Vue基礎 子元件抽取與父子元件通訊

在工作中承擔一部分前端工作，主要使用vue + element ui。

隨著版本迭代，需求增加，頁面往往變得更加臃腫，不易維護。學習子元件的封裝和抽取，能更好適應需求。

全域性&區域性？

對於全域性通用的元件，可以將其註冊為全域性的。在專案中更常用的是區域性註冊，全域性註冊固然方便，但會使元件的依賴結構不夠清晰，可能帶來的更高的維護成本。

vue官網教程中給出如下建議：

區域性註冊需要在每個使用到的地方都引用一次，父元件引用之後，子元件必須再次引用才能使用。

元件之間相對獨立，不共享變數，重中之重就是：如何傳遞資訊?

我列出一些我目前接觸到的常用資料傳遞方法:

父向子傳遞的資訊，往往是子元件的初始化資料。假如將子元件看作乙個類，在父元件中使用該類的例項，props有點類的構造引數。

props的寫法也與建構函式形參類似，可以規定傳參型別、是否必傳等。

props:

// 子元件中

this.$emit("querylist")
// 父元件中
//重新整理列表方法
querylist()

更常見的需求是需要父元件和子元件的值實現同步，比如：

vue規定了父子元件之間資料單向流動，不建議直接修改父元件傳入的prop變數。所以為了實現雙向繫結，我們需要：

1、在子元件中定義對應的變數b，拷貝父元件傳入的初始值a

2、實時監測變數b，當b發生變化時，使用$emit，傳遞b的值給父元件

3、在父元件中定義接收值的更新函式，接收到新的值後，將值賦給a

為實現第三點，vue提供了.sync語法糖，避免每次都要寫乙個更新函式，預設的函式名是update。

在明確了步驟後，我們很容易就能寫出**。需要稍微留意的是，子元件中變數b的命名最好與變數a對稱，這樣一看就是一對，**更加清晰易懂。

例如：a叫opendialog，b叫dialogopened

a叫selectoption，b叫optionselected

父元件中：

//父元件引用

// 子元件

props: 
....
// 在**中修改dialogshowed的值
computed: ,
set(val) 
}}

VUE父子元件

父頁面 actiondetail msg 子頁面呼叫父頁面的方法 this.emit parentaction 我想說的話 我是父元件 我是子元件 父元件對我說 父元件通過 prop 給子元件下發資料，子元件通過 emit觸發事件給父元件傳送訊息 1.this.children用來訪問子元件例項，要...

vue父子元件通訊，巢狀元件

子傳父 子元件定義事件say click say 子傳父div methods裡面執行say方法，通過emit給父元件傳遞乙個叫sire的自定義事件，它會自動去父元件裡面尋找sire事件 say 父元件引用子元件模板 宣告型別 註冊元件 sire自定義事件必須與子元件給的一致 say event t...

Vue元件化之父子元件

在父元件裡使用子元件時，父元件的模板最外層一定要有div塊 元件內部是無法訪問vm例項裡的data資料的，元件有自己的儲存資料的位置。元件也有data methods 生命週期函式等屬性，但data必須是乙個函式且返回的是乙個物件，物件內部儲存著資料。為什麼元件裡的data必須是函式形式？當重複使用...