vue 父元件與子元件的互動

2022-02-18 07:40:36 字數 470 閱讀 3250

我們在進行vue開發時會將公共的部分進行抽象,然後生成乙個獨立的元件,這個元件可以被其它頁面引用,如果希望有互動的動作就設計到了值的傳遞,或者方法的**等問題,這一次我們主要來說一下父元件和子元件的互動。

子元件,通過定義了prods,然後可以實現從父元件向子元件的傳遞:

呼叫父元件的方法

父元件/頁面,直接為這個prods賦值即可,注意如果js裡props名稱是小駝峰,在html需要用中線來代替

在父頁面繫結子元件的方法,然後子元件在某個時機去觸,這就形成了在子元件裡呼叫父元件的方法,使用了$emit來實現

呼叫父元件的方法
在父頁面中去繫結這個abcclick事件就可以了,當在子元件呼叫這個childclick事件時,繫結了abcclick的方法將會被一起**

VUE 父元件與子元件互動

在專案過程中,會有很多重複功能在多個頁面中處理,此時則需要把這些重複的功能進行單獨拎出,編寫公用元件 控制項 進行引用。在vue中,元件是可復用的vue例項,此時元件中的data必須是乙個函式,因為data是乙個函式時,每次引用此元件時相當於重新對返回物件進行獨立的拷貝 例項化 new 如果data...

vue學習筆記(父元件與子元件互動)

父元件往子元件menu bar傳值父 傳遞值子 接收值props fontsizelist array,defaultfontsize number 父元件呼叫子元件函式父 methods 子 methods 子元件呼叫父元件函式並傳值 子 methods 父 methods 定義乙個共用js,例如...

vue 子元件與父元件的通訊

子元件調父元件的方法 在子元件中通過this.parent.event通過 emit觸發乙個事件,父元件監聽這個事件 通過prop傳入父元件的方法 父元件 home.vue 子元件 helloworld.vue 通過 this.parent.event 呼叫父元件的方法 通過 emit 觸發乙個事件...