组件的传参

<app>
我是跟组件
	<child></child>
</app>

<div>
	<p>我是子组件</p>
	<p>{{message}}</p>
	<button></button>
</div>

1. 子向父传参
   在子组件中

<button @click="submit()"></button>

submit () {
	this.$emit('childFn',this.message)
}

在父组件中

<app>
	<child @childFn="parentFn"></child>
</app>

//在methods中，写一个 parentFn() 函数，写入传的参数，获取子组件中 message 的值：
parentFn (message) {
	this.getMessage = message
}

2 父组件向子组件传值

在子组件中

export default {
  props: ['childMessage'],
  data () {
  	return {
		...
	}
  }

在父组件中

<app>
	<child :childMessage="parentMessage"></child>
</app>

export default {
  data () {
  	return {
		parentMessage: '我是要传递的值'
	}
  }

全局事件总线
main.js:

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	// beforeCreate中模板未解析，且this是vm
	beforeCreate(){
		Vue.prototype.$bus = this	//安装全局事件总线
	}
})

接下来，我们就要对想要接收到数据的组件进行自定义事件的绑定，简单来说就是，谁要接收数据，自定义事件就绑定在谁身上

A向B传值

TestB.vue:

mounted(){
  // 绑定自定义事件
  this.$bus.$on('自定义事件名', (接收参数)=>{
    console.log('我是TestB组件，收到了数据', 接收参数);
  })
}

TestA.vue:

 methods:{
  // 触发事件,事件名不能重复
  触发事件方法名(){
    this.$bus.$emit('自定义事件名', 传递参数);
  }
},