Vue 程式設計之路（一） 父子元件之間的資料傳遞

最近公司的乙個專案中使用 vue 2.0 + element ui 實現乙個後台管理系統的前端部分，屬於**型別。其中部分頁面是資料管理頁，所以有很多可以復用的**，故引入自定義元件。在這裡分享一下開發的過程。

一、父元件向子元件傳值

圖 1 - 1  父元件.png

這邊實現的是從父元件向子元件動態傳值，傳的是乙個物件。在子元件上動態繫結要傳入的物件，如果是靜態資料（如："hello world!"）則無需屬性名前的冒號，並且需要在 components 中宣告。

圖 1 - 2 子元件.png

首先建立 props ，然後在 props 中建立對應的屬性名，之後即可在 template 中使用接收到的物件。

圖 1 - 3 接收物件後的效果圖

總結一下：  父元件向子元件傳物件（值）成功

•　在父元件中註冊並引用子元件
•　使用子元件時在子元件上新增乙個屬性，並繫結上資料
•　在子元件中建立 props ，在props 中建立相同的屬性名，用來接收資料
•　把接收到的資料在子元件中使用

圖 2 - 1 子元件.png

首先在子元件建立乙個按鈕，給這個按鈕繫結乙個點選事件。上圖是子元件中又呼叫了其他的元件（分頁元件），我這邊是子元件把頁碼傳遞給父元件，父元件拿著頁碼去請求資料，原理和按鈕繫結點選事件是相同的道理。

然後在方法中新增以下**：

pagechange(v)

在父元件的子元件標籤中監聽該事件並新增乙個響應事件來處理資料。點選分頁元件上的頁碼按鈕或點選建立的按鈕，在響應事件中使用資料，可觀察到傳值成功。

總結一下：  子元件向父元件傳值成功

•　子元件中需要發出該自定義事件，可以是按鈕的點選事件，也可以是其他方式
•　將需要傳的值放在 $emit 第二個引數的位置，這個引數會被傳給父元件中的響應方法
•　需要在父元件中使用子元件並在子元件標籤上繫結對事件的監聽

Vue（一）父子元件之間的通訊

最近入門學習vue框架，備註下一些基本的要點，從父子元件之間的通訊開始。實現父元件向子元件傳值需要在子元件物件屬性中新增props。目前所知曉的子元件向父元件傳值有兩種方法，emit和 parent方法 子元件通過 emit傳值給父元件 子元件通過 parent傳值給父元件 父元件呼叫子元件的方法通...

VUE基礎（一）父子元件通訊

1.新建檔案father.vue和children.vue放在同意目錄下 1.father.vue的 fater h1 h2 ftocvalue ref child pfunc pfunc children div template import children from children exp...

Vue元件 父子元件之間的通訊

最近在學習vue，元件之間的通訊是難點也是重點，所以想稍微總結一下。由於元件的模板無法使用父元件中的資料，所以需要用到props。prop 是你可以在元件上註冊的一些自定義特性。當乙個值傳遞給乙個 prop 特性的時候，它就變成了那個元件例項的乙個屬性。在子元件中註冊了props後，就能將父元件的資...