vue使用bus进行父子组件传值,以及解决bus多次触发的问题

新建一个bus.js文件

// bus.js
import Vue from 'vue'
export default new Vue;

子组件

<template>
	<button @click="handleClick">给父组件传值</button>
</template>

<script>
import Bus from './bus.js'
export default {
  name: "children",
  methods:{
      handleClick(){
          Bus.$emit('open','传的测试的值')
      }
  },
  
};
</script>

父组件

<template>
	<children />
</template>

<script>
import childrenfrom './children'
import Bus from './bus.js'
export default {
  name: "parent",
  created(){
      Bus.$on('open',(val)=>{
        console.log(`接受到子组件的值${val}`)
      });
  },
};
</script>

递归组件$emit多层点击不生效的时候也可以使用这个方法

解决bus多次触发的问题

在需要接收值的组件中修改代码

    created(){
    	Bus.$off('open') 
    	Bus.$on('open',(val)=>{
        	
      	});
    }

路由返回的时候使用bus传值,数据不更新的问题

// 如果遇到使用$router.go(-1)返回的时候,传值不更新的时候,在传值页面的销毁方法中destroyed()来进行传值

 // 这是传值页面
destroyed(){
    this.$bus.$emit('selectAddress',this.tshAddressStr)
},
methods:{
	selectAddress(item){
          console.log(item)
          this.tshAddressStr = item.address
          this.$router.go(-1)
       
    },
}

// 接收值的页面在created()方法中接收传过来的值

// 这是接收值的页面
created(){
        this.$bus.$off('selectAddress') 
        this.$bus.$on('selectAddress',(val)=>{
            this.addressaaa = val
        });
},