一父子组件间传值
第一种方式:
props 父组件嵌套的子组件中,使用v-bind:msg=‘xxxx’进行对象的绑定,子组件中通过定义props接收对应的msg对象
第二种方式:
使用$children获取子组件和父组件对象
第三种方式:
使用$ref获取指定的子组件
子组件向父组件传值
第一种方式:
使用$emit传递事件给父组件,父组件监听该事件
第二种方式:
使用$parent.获取父组件对象,然后再获取数据对象
二.非父子组件间传值
父孙传值 :
provide与inject的传值与props类似,前者可以给后代组件传值,而props是只能给子组件传值。
前提:a组件里调用了b组件,同时b组件里调用了c组件
区别:a组件可以用props方法直接传数据给b组件,但不能传数据给c组件
a组件可以用 provide与inject 方法直接传递数据给b组件,也可以直接给c组件传值
a组件:
b组件:
c组件:
效果图:
用provide与inject方法传值,如果值修改后面组件的值是不会跟着变得,也就是说值不会响应 ;也就是说:如果把a组件中的msg改了,b组件,c组件接收到的msg还是以前的数据,并不会变
直接把传的数据变成复杂类型的数据就行了,例如传一个对象
改变直接this.passdata.msg去修改
二.事件总线 原理上就是建⽴立⼀一个公共的js⽂文件,专⻔门⽤用来传递消息
在需要传递消息的地⽅方引⼊入, 传递消息,在需要接受消息的地方使用bus.$on接受消息