vue select父子元件通訊

2021-09-11 10:07:58 字數 1853 閱讀 8568

github**

父元件(頁面)傳資料給子元件(select)

選擇select的時候,得到對應option

emit:發射 on:監聽

:defaultgradedata="defaultgradedata"把資料傳給子元件

"hello">

"defaultgradedata">

複製**

src/components/comgrade.vue

props:['defaultgradedata'],接收父元件傳過來的資料,相當於在data裡定義了defaultgradedata

"item in defaultgradedata" :key="item.id" :value="item.id">}

複製**

v-on:choonsegrageevent="changegrade"相當於

,自定義乙個事件,監聽子元件傳送過來的訊息

"hello">

"changegrade" :defaultgradedata="defaultgradedata">

}複製**

src/components/comgrade.vue

關鍵**

預設選中第1個,並且傳送($emit)給父元件

this.selectgrade = this.gradedata[0].id

this.$emit('choonsegrageevent',this.selectgrade)

複製**

全部**
"selectgrade">

"item in defaultgradedata" :key="item.id" :value="item.id">}

複製**

不修改

src/components/comgrade.vue

@change監聽select標籤變化

@change="choosefn"傳送給父元件

"selectgrade" @change="choosefn">

"item in defaultgradedata" :key="item.id" :value="item.id">}

複製**

關鍵**ref="grade"this.$refs.grade

"grade" v-on:choonsegrageevent="changegrade" :defaultgradedata="defaultgradedata">

this.$refs.grade.initdata()

複製**

"hello">

"grade" v-on:choonsegrageevent="changegrade" :defaultgradedata="defaultgradedata">

}"gradeinit">gradeinit

複製**

父子元件通訊

子元件向父元件傳遞this emit 子元件向父元件傳遞事件並攜帶引數子元件 向父元件傳遞事件todetail並傳遞引數res this emit todetail res 父元件 監聽事件並輸出引數 todetails child comp 父元件呼叫子元件中方法 ref 用於給元素 子元件註冊引...

父子元件通訊

父元件 子元件 通過props properties縮寫 通訊 兩種方式 陣列和物件 常用物件方式 test cmovies movies cnt div comc v for item in cmovies li ul div template src js vue.js script 子元件 c...

Angular元件 父子元件通訊

angular元件間通訊 元件之間松耦合,元件之間知道的越少越好。元件4裡面點選按鈕,觸發元件5的初始化邏輯。傳統做法 在按鈕4的點選事件裡呼叫元件5的方法。緊密耦合。angular 在元件4根本不知道元件5存在的情況下實現。使用松耦合的方式在元件之間傳遞資料開發出高重用性的元件。使用輸入輸出屬性在...