Vue中父子组件的通讯

一、父组件调用子组件中的函数和数据

父组件中引入子组件 center-box:

Vue中父子组件的通讯

 

 

 首先给子组件加上 ref 属性 ‘center_box’

1、调用子组件的函数:

  this.$refs[‘center_box‘].test()

2、调用子组件中 data 的值:this.$refs[‘center_box‘].key

二、子组件使用父组件的值和函数

1、父组件通过 props 来传递给子组件值和函数(这是第一种方法,通过props来传递,这种方式是单向的,只能父传子):

Vue中父子组件的通讯

 

 station_svg是父组件中的一个值,map_status是父组件中的一个函数

Vue中父子组件的通讯

 

  在子组件中接收,记得声明接收的类型,然后就可以在子组件中使用父组件的函数和值,如下所示。

Vue中父子组件的通讯

 

 console.log(this.station_svg)

2、通过 $emit 方法来传递(这是第二种方法,同样也是单向的,只能子组件调用父组件)

Vue中父子组件的通讯

 

 如上图所示,监听子组件的操作,对应父组件中的一个函数,如下图所示:

Vue中父子组件的通讯

 

 然后,在子组件中通过 $emit 来触发:

Vue中父子组件的通讯

 

 这样,当子组件触发 map_station_dblclick 时,就会执行父组件中对应的 map_station_dblclick

3、通过 this.$parent 调用 父组件的函数和值(第三种方法,简单粗暴,但慎用,一般采用上述的两种方法)

直接 tthis.$parent.父组件中的函数和值就可以了

Vue中父子组件的通讯

上一篇:update 的返回值是匹配的行数还是影响的行数?


下一篇:异步请求与合并