组件传值eventHub设置全局的使用

460 阅读1分钟

组件传值eventHub设置全局的使用

main.js中设置全局数据

new Vue({ 
  data: {
    eventHub: new Vue(),
  },
})

html标签数据展示

<template>
	<span style="color:#fed731">{{roomd}}</span>
</template>

需要变更数据组件中获取数据

初始取值

data() {
  return { 
    roomd: "", 
  }
},
created() {
    //表头
    this.$root.eventHub.$on("getCardAccount", this.getCardAccount);

变更取值

 methods: {
   getCardAccount(val) {
     this.roomCard = val;
   },
 }

组件中取值传递给全局data并命名getCardAccount

 this.$root.eventHub.$emit(
   "getCardAccount",
    res.data.data.rooum
  );