VUE元件通訊

2022-01-22 05:46:51 字數 1087 閱讀 1293

第一種:將其他元件以import引入自定義標籤接收,在當前元件中component裡註冊該標籤,頁面上可以用《自定義標籤》

第二種:在路由中定義好元件,元件中含有children,頁面上通過形式使用,也算是父子元件,當前元件為父元件,router-view路由的為子元件。

第一種: 在父元件裡面,子元件以自定義標籤,或者router-view的形式呼叫,在這些標籤裡通過:lists=』list』,:alert1=』alert1』,形式傳遞給子元件。:後面跟的是自己定義的引數名,後面子元件接收時用到。』』裡面跟的是父元件裡的資料,或者方法。

子元件中,用props:[『lists』,』alert1』],形式接收父元件的資料和方法,注意接收使用的名字跟父元件自己定義的名字要一致,此時如果接收的方法用到了父元件的變數,在子元件中呼叫時,還是指向父元件的變數。

父元件傳遞資料和方法

子元件接收、使用資料和方法

第二種:

父元件基本同上,區別在於繫結方法時用「v-on:」或「@」而不是用「:」,親測只有「:」不起作用。

子元件呼叫資料與上一種一樣,呼叫父元件方法則不使用props來接收父元件的方法,在methods中通過定義乙個新方法,在方法體裡面寫this.$emit(『test』,』』),以這種形式獲取父元件的方法,在賦值給子元件新定義的方法,注意test是父元件中繫結時候自己定義的名字

Vue 元件通訊

單層元件通訊 prop 元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件 的資料。父元件的資料需要通過 prop 才能下發到子元件中。子元件要顯式地用 props 選項宣告它預期的資料 vue.component child 然後給他傳乙個訊息 message hel...

vue元件通訊

這部分vue文件已經說的很清楚了,但是為了更好的理解,自己再整理一遍。首先,父元件的與子元件的通訊是通過子元件的props。那麼子元件有資料變化時,想要通知父元件應該怎麼辦呢?父元件可以在使用子元件的地方直接用 v on 來監聽子元件觸發的事件。簡單來說,就是子元件監聽的事件,在函式內使用 emit...

Vue元件通訊

父子級通訊推薦使用 props emit parent children refs attrs listeners 子元件使用props 接收父元件傳遞的值 父元件向子元件傳值 子元件通過 emit 讓父元件接收事件,改變父元件的data裡面的值 子元件向父元件傳值 父元件 子元件 這裡的props...