Vue组件间传值

一、父传子

子组件中定义一个props，用来取出父组件传来的值

在父组件中对子组件的自定义属性绑定父组件的变量

 二、子传父

使用自定义事件，在父组件中给子组件绑定一个处理函数

子组件中使用$emit出发父组件中的函数进行传参

export default {
  data(){
      return {num 0}
  },
  methods:{
     count(){
       this.count +=1
       this.$emit('numChange',this.count)
      }
   }
}

三、兄弟组件间传值

采用事件总线eventBus，可以理解为在组件之间建立一个中转站

1.创建一个新的eventBus实例

import Vue from 'vue'
 
const eventBus = new Vue() //创建Vue实例：eventBus
 
exoprt default eventBus //暴露

2.在各组件中引入eventBus

import eventBus form '../eventBus.js'

3.使用$emit传参

eventBus.$emit('sendMsg','Hello World')

4.使用$on接受参数

eventBus.$on('sendMeg',(msg)=>{
     console.log(msg)
  }
)

总结：多练