vue中父子組件傳值問題 通過props 和 $emit()方法


(代碼在最后)

1、父組件給子組件傳值直接通過props,聽着很簡單,但是對於初學者來說還是比較難以理解的,今天小白通過自己的實踐操作結合代碼分析一下  

案例  把模態框單獨的抽離出來,當作一個組件

第一步:首先寫好一個模態框 (我直接用的是element-ui中的dialog彈出框) 當作子組件

第二步:在父組件中引入  引入的時候注意一下自己的路徑就可以了,這兩步應該很容易吧,很容易理解的

 

 

第三步:在父組件中使用components注入這個組件

 

 

 

第四步:在父組件中直接使用就可以啦 ,說着容易,但是沒實際做過的,還是比較難以理解的

 

第五步:在父組件data數據中,定義一個dialogFormVIsible :false  這個用來控制彈出框的顯示與隱藏的

 

重點來了涉及到父組件傳值給子組件了

第六步:父組件傳值給子組件

 

 

 

 

第七步:子組件接受父組件接受的值,這就是通常所說的通過props接受父組件的值

 

 

 

彈出框出現了,哈哈哈哈

 

 

 第八步:在子組件中填寫數據啦,然后給父組件  this.formLabeAlign就是子組件獲取到的表單中的值

 

 

重點又來啦,哈哈哈哈哈哈

第九步:父組件中通過子組件自定義的事件,來獲取數據,聽着是不是又有點懵懵的啦,哈哈我也是,自定義事件就是上一步我們剛剛隨便的起的名字的事件,現在是不是理解了呢

 

 

第十步:這是是showChildMsg方法,我起的名字很隨便的

 

 

 懂了沒呀,哈哈最后說一句,木有代碼~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  我的代碼放出來也是運行不了滴

下面是我項目中的其他需求了,我要把父組件中的值渲染到子組件的這個框中

首先我定義了一個對象

 

然后把獲取到的值放在這個對象中

 

 現在這個code對象中已經有我需要的值了,

 

 現在子組件要接收父組件傳過來的值啦

 

 

哈哈最后一步啦

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM