vue兄弟组件传值、方法


1.创建一个vue实例

bus.js

import Vue from 'vue'
export default new Vue()
 
1. b.vue传值给a.vue
  a.vue
import Bus from '@/libs/bus.js'
//调用
Bus.$emit('selectionSampleList', this.selection)
 
 
  b.vue
 import Bus from '@/libs/bus.js'
 mounted() {
            this.init()
            Bus.$on('selectionSampleList', (e) => {
                this.$refs['sampleDetail'].init(e)
            })
        },
//销毁
  beforeDestroy(){
    Bus.$off('selectionSampleList')
  },
        activated () {
            Bus.$on('selectionSampleList', (e) => {
                this.$refs['sampleDetail'].init(e)
            })
        },
2.b.vue传方法给a.vue
   b.vue
  import Bus from '@/libs/bus.js'
  mounted(){
    Bus.$on('saveFun',this.saveFun)
  },
  //销毁
  beforeDestroy(){
    Bus.$off('saveFun')
  },
  methods:{
    saveFun(){
      console.log('123)
    }
  }
    a.vue
  import Bus from '@/libs/bus.js'
  methods:{
    btnFun(){
      //调用方法
      Bus.$emit('saveFun')//不传参
      Bus.$emit('saveFun',‘参数’)//传参
    }
  }
  
注意:这里最好再加上个销毁事件,否则当页面销毁后,事件接收还是会存在的


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM