@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、组件等，填充的内容会替换子组件的标签。

简单理解就是：给子组件占的每一个坑取名，将父组件添加的HTML元素添加到指定名字的坑，就实现了分发内容在不同位置显示

单一插槽

一般写在子组件中的template。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

具名插槽

匿名插槽没有name属性，就像上面的单一插槽的例子，又叫是匿名插槽，那么，插槽加了name属性，就变成了具名插槽。具名插槽可以在一个组件中出现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

插槽作用域

作用域插槽和上面的两种插槽区别在于可以绑定数据：

绑定在 元素上的 attribute 被称为插槽prop。现在在父级作用域中，通过slot-scope获取插槽作用域

我们可以使用带值的 v-slot来定义我们提供的插槽prop的名字。

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小时内删除侵权内容。