关于Vue组件间的常用传参方式

// 父组件
<hello-world msg="hello world!"><hello-world>

// 子组件
<div>{{msg}}</div>

props：['msg']

//    子组件
<input v-model="username" @change="setUser">

return {
    username:'tct'
}

methods：{
      setUser(){
          this.$emit('transferUser', username)
      }
}

//    父组件
<hello-world @transferUser="getUser"><hello-world>

return {
    user:''
}

methods：{
      getUser(msg){
          this.user = msg
      }
}

class Bus {
  constructor () {
    this.callbackList = {}
  }

  $on (name, callback) {
    // 注册事件
    this.callbackList[name] ? this.callbackList[name].push(callback) : (this.callbackList[name] = [callback])
  }

  $emit (name, args) {
    // 触发事件
    if (this.callbackList[name]) {
      this.callbackList[name].forEach(cb => cb(args))
    }
  }
}

Vue.prototype.$bus = new Bus()

// 任意两个组件中
// 组件一：在组件的 mounted() 去注册事件
this.$bus.$on('confirm', handleConfirm)

// 组件二：触发事件(如：点击事件后执行触发事件即可)
this.$bus.$emit('confirm', list)