(一)如何玩轉vue組件間傳值?

說起來慚愧,我開發的項目很少用vue開發,我一直都是java web開發,使用jquery輔助,開發的工具比較輕量級,前後臺都是自己搞的,主要是用於公司內部計算,篩選等特製的功能,最終目的為導出報表。現在開始開始嘗試用vue搭建一下項目,總結一下組件間傳值:

父子組件間傳值:

第一種方式:在父組件中引入子組件,並註冊子組件,並在父組件中掛載,同時在掛載的子組件動態綁定父組件的數據,在子組件中插入插入對象:props:["綁定的屬性t"],在子組件中直接渲染,代碼如下:

父組件:A.vue:

 

//3、掛載組件,並綁定屬性:t,綁定值mmg=adaf,也可以綁定方法

接下來在子組件中引用:

{{t}} //6.在子組件中渲染或者動態綁定到子組件中,進行雙向數據綁定

經過上面的6個步驟便可以成功渲染出父組件傳過來的值。

第二種方式,其實很快捷,但是在API 中卻不推薦使用(狀態不易跟蹤),在完成父組件的步驟後,直接在子組件中需要用到父組件的值的地方,放如下代碼:

this.$parent.mmg

這種方式可以直接在子組件的內部進行賦值渲染,第一種方式卻只能拿到頁面上渲染或者雙向綁定傳給子組件內部的數據屬性保存。如果直接在內部賦值,會出現未定義的報錯。

歡迎大家點贊評論,互相探討前端技術,共同進步,謝謝!

下一篇:子組件傳值給父組件


分享到:


相關文章: