一、原理
元件的通訊————父元件向子元件傳遞訊息
方法:通過子元件的props屬性進行傳遞.
props屬性設定資料內容變數的定義方式有兩種方式:
方式一： 字串陣列型別,陣列中的字串就是用於接收父元件所傳資料的自定義變數名稱(這種方式不常用)
props:['自定義儲存變數名1','自定義儲存變數名2',...]
方式二： 物件型別,使用物件型別的定義方式我們可以設定父元件傳遞資料的型別,也可以設定自定義儲存變數名的預設值等(推薦使用這種方式)
props:,
自定義儲存變數名2:
},required:布林值}}
通訊步驟:
(1)建立一對父、子元件。
(2)在父元件的data屬性中準備需要傳遞的資料;在子元件的props屬性中設定乙個變數用於接收父元件的資料。
(3)在使用自定義元件時,在元件名稱上通過v-bind繫結子元件的props屬性中的變數名,值為父元件中的資料變數名。(這裡資料就實現了資料資訊的傳遞工作)
《元件名 v-bind:子元件自定義儲存變數名="父元件資料變數名">**實現案例:
VUE 父元件子元件間通訊
父元件給子元件傳參，子元件通過prop屬性進行接收 簡單搭建元件部分如下，其中父元素身上有兩個資料，分別是字元型資料1，json型資料2 子元件分別從父元件獲取這兩個資料並展示，其次子元件有自己的資料 子元件通過 emit 事件想父元件發射資料 頁面結構 其中child a為子元件 這是父元件 父元...
Vue元件通訊之父傳子
元件是vue中的重頭戲，今天開始我會陸續分享自己在學習中的有關元件通訊的一些心得。下面 對上面的程式做個解讀 1.首先定義了乙個全域性的元件名字為blog post 2.title 傳入的就是字串 靜態賦值 如果傳入變數的時候title blog 動態賦值 此時需要v bind指令 3.父傳子的重要...
Vue元件通訊之父傳子
一般情況下，子元件中無法直接使用父元件的變數。借助子元件的props選項可以實現這一點。這裡我將乙個vue例項作為乙個父元件 vue methods components 子元件定義如下 const cpn required true required為true表示必須傳遞乙個值給此變數 count...