Vue.js中的组件通信

网友投稿 695 2022-05-30

注意:组件通信, 无论效果是如何的, Vue都是单向数据流(组件之间的数据通信)

Vue.js中组件通信一共分为四种:

父子组件通信

子父组件通信

非父子组件通信

多组件状态共享

下面一一介绍:

父子组件通信

绑定的是简单数据类型:

父组件中定义数据, 通过单向数据绑定的形式, 将数据绑定在子组件身上, 属性是自定义属性

子组件通过配置项中的props接收数据, props可以是一个数组,数组中放的是自定义属性名称

那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用

父组件中数据一旦修改, 子组件数据就会修改, 那么这也就是单项数据流

结构:

I AM FATHER

i am son

我爸这个月给我了{{ money }}元

子父通信

绑定了复杂的数据类型:

父组件中的数据是一复杂数据类型, 那么父组件绑定数据的时候, 给子组件的是一个引用地址

子组件可以通过这个引用地址, 修改这个数据

效果上像, 子组件和父组件通信了, 违背单项数据流

父组件可以传递一个方法给子组件:

父组件定义方法, 然后将这个方法通过单向数据绑定的形式传递给子组件

子组件通过props属性接收, 然后通过 @click = "方法名"

通过自定义事件来实现通信:

父组件中定义 数据 和 方法(方法时用来操作数据的)

在子组件身上绑定自定义事件

子组件定义方法, 在这个方法中通过 this.$emit(eventType,实际参数) 来调用自定义事件的事件处理程序

结构:

I 'm king

国库里现在有{{ gk }}元

I 'm king

国库里现在有{{ gk }}元

1

2

3

4

5

6

7

8

9

10

11

12

//步骤1,父组件中定义数据和方法,gk,getMoney Vue.component('King',{ template:'#king', data(){ return { gk:0 } }, methods:{ getMoney(value){ this.gk+=value; } } }) //步骤3,子组件定义方法,这个方法中通过方法中通过 this.$emit(eventType,实际参数)触发了步骤2的自定义事件 Vue.component('People',{ template:'#people', data(){ return { money:2000 } }, methods:{ giveMoney(){ this.$emit('getmoney',this.money/2) } } }) new Vue({ el:'#app' })

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

非父子通信

使用ref来绑定组件, (注意:ref也可以绑定DOM元素) 【ref链】

在父组件的模板中, 使用ref = refName 绑定在两个兄弟组件身上

在任意一个子组件中, 就可以通过 this.$parent.$refs.refName 就可以获得另一个子组件了, 同时这个自组件身上的数据和方法同样也得到了

结构:

我是父亲

你好

I am boy

我现在有:{{ cash }} 钱

I am girl

Vue.component('Father',{ template: '#father', data () { return { name: 'father' } } }) Vue.component('Boy',{ template: '#boy', data () { return { cash: 2000 } }, methods: { incrementCash (value) { this.cash += value } } }) Vue.component('Girl',{ template: '#girl', data () { return { money: 1000 } }, methods: { give(){ console.log('===================================='); console.log(this.$parent); console.log('===================================='); // console.log( this.$parent.$refs ) // { body: Vuecomponent,girl: VueComponent } this.$parent.$refs.boy.incrementCash( this.money ) // this.$parent.$children } } }) new Vue({ el: '#app' })

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

通过事件总线(bus)

它是通过事件的发布(声明), 以及事件的订阅(触发)来做的

首先在js中 创建一个bus对象(vm)

var bus = new Vue()

在Boy组件中定义数据, 和修改数据的方法

在Boy组件中 通过 created 钩子 , 进行bus事件的发布

注意:参数传递问题实参写在 bus.$emit('add',1000)

created: { bus.$on('add',this.addCount) }

1

2

在MyButton组件的方法中通过 bus进行事件的订阅

结构:

I 'm boy

我现在有{{ cash }}元

I 'm girl

/* 1.它是通过事件的发布(声明), 以及事件的订阅(触发)来做的 2.首先在js中 创建一个bus对象(vm) 3.在Boy组件中定义数据, 和修改数据的方法 4.在Boy组件中 通过 created 钩子 , 进行bus事件的发布 注意:参数传递问题实参写在 bus.$emit('add',1000) */ let bus=new Vue(); Vue.component('Boy',{ template:'#boy', data(){ return { cash:0 } }, methods:{ getMoney(value){ this.cash+=value; } }, created(){ bus.$on('add',this.getMoney) } }) Vue.component('Girl',{ template:'#girl', methods:{ giveMoney(){ bus.$emit('add',1000) } } }) new Vue({ el:'#app' })

1

2

3

4

5

6

7

8

9

10

Vue.js中的组件通信

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

多组件状态共享

javaScript Vue

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:园区智慧路灯:基于智慧灯杆的智慧园区进入快速建设发展期
下一篇:识别全局,快人一步丨华为云态势感知上新!
相关文章