天天看點

vuejs父子元件通信多種情況

一:父元件主動向子元件傳值

(1)在調用子元件的地方綁定動态資料(也可以傳遞付父元件方法給子元件,方式一樣)

<v-childcomp :parentMsg="parentMsg"></v-childcomp>      
vuejs父子元件通信多種情況

(2)子元件通過props接受父元件穿的值

props:['parentMsg']      
vuejs父子元件通信多種情況

效果圖:

vuejs父子元件通信多種情況

二:父元件主動擷取子元件的值

(1)調用子元件時候定義一個ref

(2)在父元件裡用過調用子元件屬性方法:

this.$refs.msg.屬性
this.$refs.msg.方法      
vuejs父子元件通信多種情況

效果:

vuejs父子元件通信多種情況

三:子元件主動擷取父元件的資料

(1)this.$parent.屬性

      this.$parent.方法

vuejs父子元件通信多種情況

效果:

vuejs父子元件通信多種情況

四:子元件主動傳值給父元件

(1)子元件建立一個主動事件通過this.$emit('event',data)傳出值

vuejs父子元件通信多種情況

(2)父元件注冊綁定自定義監聽事件

vuejs父子元件通信多種情況

效果圖:

vuejs父子元件通信多種情況

                                                                                                           --------優秀的人都是一點一點積累的。(IT屆的吳彥祖)