Vue.js學(xué)習(xí)系列(四十三)-- 使用props傳遞數(shù)據(jù)

組件實例的作用域是孤立的,這就意味著不能并且不應(yīng)該在子組件模板內(nèi)直接引用父組件的數(shù)據(jù),

prop是父組件用來傳遞數(shù)據(jù)的一個自定義屬性。父組件的數(shù)據(jù)需要通過props把數(shù)據(jù)傳給子組件,子組件需要顯式地用props選項聲明"prop":

下面我們就通過一個實例將message:hello傳遞給子組件。

運行之后,將“hello”顯示的span標(biāo)簽上。

動態(tài)Prop

類似于用v-bind綁定HTML特性到一個表達(dá)式,也可以用v-bind動態(tài)綁定props的值到父組件的數(shù)據(jù)中。每當(dāng)父組件的數(shù)據(jù)變化時,該變化也會傳導(dǎo)給子組件:

運行結(jié)果如下:

當(dāng)修改文本框中的內(nèi)容,span的文本值也會隨著改變。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容