vue2组件之间传值方式，父子，子父，兄弟，v-model ,provide和inject,$parent和$children

1.父组件向子组件传值

//子组件中使用props进行数据接收

 

 



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

2.子传父事件传值

1.在子组件中使用v-on进行事件绑定，使用$emit发送数据（@click="handleClick(item.value)）this.$emit(‘handleClick’, val)
2.在父组件中自定义事件用于接收传过来的值，使用$on接收数据（@handleClick）

//父组件
  


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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

3.兄弟组件之间传值：EventBus

 1.首先在父组件进行组件挂载
 2.新建一个公共的js文件 bus.js  代码
  impourt vue form 'vue  
  export default  new  vue
  3.在需要传值的子组件中进行公共JS文件的引入 import bus  from '@/components/utils/bus.js'
  4.在传值的子组件中使用$emit进行传值  bas.$emit （‘’，this.cuanzhi）
在接收值的组件中使用$on进行接收（写在钩子函数中,mounted！！！)
1
2
3
4
5
6
7

4.provide和inject

1.父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量

//父组件
  
  
  
  //子组件 
  //接收到的值
  
{{content}}
    
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

5.v-model

//父组件
  
  
  
  //子组件 
  //接收到的值
  
子组件 接收到的值{{value}}
    
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

6. $parent和$children

子组件通过$parent对父组件进行操作，父组件通过$children对子组件进行操作。

子组件调用父组件的方法 this.$parent.方法名()父组件调用子组件的方法this.$children.方法名()

//父组件
  
  
  
  //子组件 
  //接收到的值
  
子组件 接收到的值{{$parent.str}}
    
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