六十三、Vue中非父子(兄弟)組件間傳值，插槽的使用和作用域插槽（非常重要）
@Author：Runsen
@Date：2020/10/18
寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累， 每天都要加油！！！
文章目錄
非父子(兄弟)組件間傳值（重要）
Vue插槽的使用
單一插槽
具名插槽
插槽作用域
后言
非父子(兄弟)組件間傳值（重要）
如果2個組件不是父子組件，那么如何通信呢？這時可以通過bus來實現通信.
非父子之間傳值，可以采用發布訂閱模式，這種模式在 Vue 中被稱為總線機制，或者叫做 Bus / 發布訂閱模式 / 觀察者模式。
下面實現一個例子：實現點擊Runsen時，Maoli變成Runsen；點擊Maoli時,Runsen變成Maoli；(兄弟組件傳值)
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
45
46
Vue插槽的使用
插槽就是子組件中的提供給父組件使用的一個占位符，用
簡單理解就是：給子組件占的每一個坑取名，將父組件添加的HTML元素添加到指定名字的坑，就實現了分發內容在不同位置顯示
單一插槽
hello
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
具名插槽
匿名插槽沒有name屬性，就像上面的單一插槽的例子，又叫是匿名插槽，那么，插槽加了name屬性，就變成了具名插槽。具名插槽可以在一個組件中出現N次。出現在不同的位置。
header
footer
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
插槽作用域
作用域插槽和上面的兩種插槽區別在于可以綁定數據：
綁定在
我們可以使用帶值的 v-slot來定義我們提供的插槽prop的名字。
{{props.item}}
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
以上就是我今天對solt的理解和學習， 希望對你有幫助
參考文章
https://mp.weixin.qq.com/s/VM2YzyM6KOkDbEeGKusJPg
https://mp.weixin.qq.com/s/YM8q6PKUVGO2p_AUzD-7Ww
慕課網Vue2.5->2.6->3.0 開發去哪兒網App 從零基礎入門到實戰項目開發
后言
不為明天而焦灼，不為今天而嘆息，只為今天更美好。
Vue
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
