Vue2 0使用props傳遞資料 6

2021-08-11 11:01:03 字數 960 閱讀 3415

prop驗證

name:}

age:}

component元件(預設):

msg_1:}

childmsg:}

mytext:}

show_text:}

msg_null:}

msg_string:}

msg_number:}

msg_obj:}

msg_twoway:

msg_validate:}

msg_number2string:}

msg_obj2json:}

msg_json2obj:}

}取值即可。

5、msg_twoway:雙向資料繫結,在測試的過程中發現,即使設定「twoway: true」,當子元件發生變化時,vue例項的資料並不會更新,還是單向的資料繫結,這裡我將child中原先的「:msg_twoway="telphone"」更改為「:msg_twoway.sync="telphone"」,保證測試能夠資料雙向繫結。

6、msg_validate:有驗證規則的元件資料,這裡定義的規則是當前數值必須大於0,如果將child06中的「:msg_validate="mobilephone"」更改為「:msg_validate="-1"」。控制台報錯。

7、msg_number2string:在結果賦值之前將數值轉化為字串。

8、msg_obj2json:vue.js內建了json的兩個方法,乙個是json.parse(jsonstr)==》將json字串轉化為js物件,另外乙個是json.stringify(obj)==》將js物件序列化為json字串。這裡是將obj轉化為json字串,需要新增coerce屬性,它是乙個具有返回json字串的函式,當然不是必須得用json.stringify(obj)方法,只要方法合理,能夠轉化為json能夠識別的字串即可。

9、msg_json2obj: 將json字串轉化為js物件。

-->

Vue使用props傳遞資料

元件不僅僅是用來進行內容的復用,更重要的是元件之間的要進行通訊。通常父元件的模板中包含子元件,父元件要正向的向子元件傳遞資料或引數,子元件接受到後根據引數額不同來渲染不同的內容或執行操作。這個正向傳遞的過程就是通過props來實現的。在元件中,使用選項props來宣告需要從父級接受的資料,props...

Vue 使用 props 傳遞資料

元件不僅僅是要把模板內容進行復用,更重要的是元件間要通訊。通常父元件的模板中包含子元件,父元件要正向的向子元件傳遞資料或引數,子元件接收到引數後,根據引數的不同來渲染不同的內容或執行操作。這個正向傳遞資料的過程就是要通過props來實現的。在元件中,使用選項 props 來宣告需要從父級接受的資料,...

Vue2 0使用小結

近期第一次使用vue快速開發了一款前端專案,開發效率與便捷性大幅提公升,體驗了一把vue的藝術之道,在此總結下目前所接觸到的vue基礎使用知識,後續會補充遇到的知識點和問題以及解決方案.簡介 vue 是典型mvvm框架,擁有雙向繫結的能力與完整的元件化方案,利用 virtual dom 提供了函式式...