父子元件通訊

2021-10-25 04:27:46 字數 1644 閱讀 7077

父元件 —> 子元件 通過props(properties縮寫)通訊 兩種方式:陣列和物件(常用物件方式)

"test"

>

:cmovies

="movies"

>

cnt>

div>

"comc"

>

>

>

v-for

="item in cmovies"

>

}li>

ul>

div>

template

>

src=

"../js/vue.js"

>

script

>

>

<

!-- 子元件--

>

const cnt =

, requires:

true

//規定必須傳值}}

}<

!-- 父元件--

>

newvue(,

//註冊子元件

components:})

script

>

子元件 —> 父元件 通過$emit event事件傳遞

"test"

>

@itemclick

="cpnclick"

>

cnt>

div>

"comc"

>

>

v-for

="item in categories"

@click

="bntclick(item)"

>

}button

>

div>

template

>

src=

"../js/vue.js"

>

script

>

>

const cnt =,,

,]}}

, methods:}}

newvue(,

components:

, methods:}}

)script

>

父元件訪問子元件 $children 和 $refs (常用)

"test"

>

ref=

"aaa"

>

cnt>

@click

="bntclick"

>

按鈕button

>

div>

"cnp"

>

>

我是cnp元件h2

>

template

>

src=

"../js/vue.js"

>

script

>

>

newvue(,

methods:},

components:},

methods:}}

}})script

>

父子元件通訊

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

Angular元件 父子元件通訊

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

Vue父子元件通訊

1.父與子通訊,通過屬性傳遞值,如下 lang zh cn charset utf 8 src js vue.js script title head id example p parent div type text x template id parenttpl 這是父元件h1 name zha...