六十一、Vue中父子組件傳值和組件參數(shù)校驗

@Author：Runsen

@Date:2020/10/17

寫在前面：我是「Runsen」，熱愛技術(shù)、熱愛開源、熱愛編程。技術(shù)是開源的、知識是共享的。大四棄算法轉(zhuǎn)前端，需要每天的日積月累，需要強大的自控自制能力。

文章目錄

父組件向子組件傳值

子組件向父組件傳值

組件參數(shù)校驗

后言

父組件向子組件傳值

傳值步驟

① 子組件在 props中創(chuàng)建一個屬性，用以接收父組件傳過來的數(shù)據(jù)；

② 父組件中注冊子組件。通過屬性綁定（ v-bind:）的形式，把需要傳遞給子組件的數(shù)據(jù)傳遞到子組件的內(nèi)部，供子組件使用；

③ 在子組件標(biāo)簽中添加子組件 props中創(chuàng)建的屬性；

④ 把需要傳給子組件的值賦給該屬性

代碼示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

父組件可以修改傳給子組件的值，但是子組件不能修改從父組件傳遞過來的值，因為可能會有其他組件共用這個值，因此Vue會報[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "count"的警告錯誤。

`

解決的方法：子組件可以將這個組件拷貝出來后操作拷貝值，最終的代碼示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

子組件向父組件傳值

子組件傳值給父組件流程：

1.子組件綁定事件

2.子組件的事件處理函數(shù)中通過$emit()向外觸發(fā)事件，可攜帶參數(shù)

3.父組件監(jiān)聽子組件觸發(fā)的事件

4.在父組件的事件處理函數(shù)中拿到子組件傳遞的參數(shù)，處理子組件的請求

子組件對自己無法操作的數(shù)據(jù)向父組件拋出請求（通過$emit()向外觸發(fā)事件），這個請求中可攜帶相關(guān)數(shù)據(jù)，等待父組件接收這個響應(yīng)然后自行處理這個請求后更新的數(shù)據(jù)重新被傳遞給子組件。

代碼示例

=

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

總結(jié)：父組件向子組件傳值用私有的data數(shù)據(jù)拷貝props數(shù)據(jù)，再操作data來實現(xiàn)。子組件傳值給父組件一共四個流程。

在組件傳值過程中，無論是父傳子、還是子傳父，它們都有一個共同點就是有一個中間介質(zhì)。父傳子的介質(zhì)是 props中的屬性，子傳父的介質(zhì)是自定義事件。

父子組件的關(guān)系可以總結(jié)為props向下傳遞，事件向上傳遞。父組件通過props給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送信息。

父組件通過 v-bind:綁定參數(shù)傳給子組件，子組件通過 props接收這個參數(shù)。

在組件的最底層開始寫事件，由最底層組件逐步向上$emit事件流，并攜帶相應(yīng)參數(shù)，最后在父組件內(nèi)完成總的數(shù)據(jù)處理。

組件參數(shù)校驗

props 可以是數(shù)組或?qū)ο螅糜诮邮諄碜愿附M件的數(shù)據(jù)。props 可以是簡單的數(shù)組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義驗證和設(shè)置默認(rèn)值。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

參考資料：

慕課網(wǎng)Vue2.5->2.6->3.0 開發(fā)去哪兒網(wǎng)App 從零基礎(chǔ)入門到實戰(zhàn)項目開發(fā)

https://mp.weixin.qq.com/s/yvt9mnQwcydUgg3QqdaWeA

后言

據(jù)說，放張小姐姐覺得照片可以提高閱讀量，圖是來源學(xué)校的2020新生。

這個時代做什么事，門檻都變得好高，想當(dāng)個宅男，你買得起房子嗎？看看學(xué)校的新生，養(yǎng)下眼，這種白日夢不要做！

Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。