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

组件传值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
  );
复制代码

转载于:https://juejin.im/post/5a93cc366fb9a06363243a00