vue组件间传递数据的几种方式

一.父传子 子组件通过props属性接收

// 在子组件内定义组件接收一个参数 name
{
  props: ['name']
}
// 父组件使用组件时传递参数 name
<child :name="name"></child>
 

二.子传父 通过$emit 传递数据给父元素

// 子组件定义事件

this.$emit('事件名称', '传递的参数') //例： this.$emit('add', 111)

 

// 父组件监听事件的触发

<child @事件名称="事件触发的方法"/>

三.任意组件间通信

1.全局事件总线

// 定义事件总线

let bus = new Vue()

Vue.prototype.bus = bus

或者在入口文件的new vue实例的时候在里面放入一个初始化钩子

Vue.prototype.$bus=this

 

// 定义发送事件

this.bus.$emit('事件名称', data)

 

// 定义接收事件 并在回调中接收参数

this.bus.$on('事件名称', (data) => {      

})

2.消息订阅与发布（pubsub)

步骤

一 、安装pubsub: npm