vue中props父元件給子元件傳值以及父子元件主動獲值
阿新 • • 發佈:2019-01-22
父元件給子元件傳值:
1.父元件呼叫子元件的時候 在父元件中繫結動態屬性
<v-header :title='title' :homemsg='msg' :run='run' :home='this'></v-header>
:home='this'將整個父元件傳給子元件 通過this.home.屬性名或方法名 來引用父元件中的屬性或方法
2.在子元件裡面通過props陣列接收父元件傳過來的資料,其中第三個值是父元件中的方法,引用時不直接呼叫方法而是作為物件引用。也可以在子元件中穿實參到父元件的形參中。
props也可以作為子元件驗證父元件傳遞資料的合法性(很少使用)
props:{
'title':String,
'homemsg':String}
父元件主動獲取子元件的資料和方法:
1.呼叫子元件的時候定義一個ref
<v-header ref="header"></v-header>
2.在父元件裡面通過
this.$refs.header.屬性
this.$refs.header.方法
子元件主動獲取父元件的資料和方法:
this.$parent.資料
this.$parent.方法