(代碼在最后)
1、父組件給子組件傳值直接通過props,聽着很簡單,但是對於初學者來說還是比較難以理解的,今天小白通過自己的實踐操作結合代碼分析一下
案例 把模態框單獨的抽離出來,當作一個組件
第一步:首先寫好一個模態框 (我直接用的是element-ui中的dialog彈出框) 當作子組件
第二步:在父組件中引入 引入的時候注意一下自己的路徑就可以了,這兩步應該很容易吧,很容易理解的
第三步:在父組件中使用components注入這個組件
第四步:在父組件中直接使用就可以啦 ,說着容易,但是沒實際做過的,還是比較難以理解的
第五步:在父組件data數據中,定義一個dialogFormVIsible :false 這個用來控制彈出框的顯示與隱藏的
重點來了涉及到父組件傳值給子組件了
第六步:父組件傳值給子組件
第七步:子組件接受父組件接受的值,這就是通常所說的通過props接受父組件的值
彈出框出現了,哈哈哈哈
第八步:在子組件中填寫數據啦,然后給父組件 this.formLabeAlign就是子組件獲取到的表單中的值
重點又來啦,哈哈哈哈哈哈
第九步:父組件中通過子組件自定義的事件,來獲取數據,聽着是不是又有點懵懵的啦,哈哈我也是,自定義事件就是上一步我們剛剛隨便的起的名字的事件,現在是不是理解了呢
第十步:這是是showChildMsg方法,我起的名字很隨便的
懂了沒呀,哈哈最后說一句,木有代碼~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 我的代碼放出來也是運行不了滴
下面是我項目中的其他需求了,我要把父組件中的值渲染到子組件的這個框中
首先我定義了一個對象
然后把獲取到的值放在這個對象中
現在這個code對象中已經有我需要的值了,
現在子組件要接收父組件傳過來的值啦
哈哈最后一步啦