vue-组件之间互相出发事件

1.子组件出发父组件事件

子组件触发：@click="$emit('cancel')"

父组件传入：@cancel="showModal=false"

 

 

2.父组件触发子组件事件

父组件：<child ref="mychild"></child>

　　　　this.$refs.mychild.parentHandleclick("嘿嘿嘿");

子组件：

methods: {
      parentHandleclick(e) {
        console.log(e)
      }

3.兄弟组件之间传递  利用watch 对数据进行监控 出发事件
父组件：　　

<cart1 
      @callCart2="callCart2"
    />
    <cart2 
      :message1="message1"
    />

data(){
    return{
      message1:'',
    }
  },
  methods:{
    callCart2(data){
      this.message1=data
    },
  }

组件cart1

<template>
  <div>
    子组件1
    <el-button @click="sendToCart2">
      给组件2发信息
    </el-button>
  </div>
</template>

<script>
export default {
  name:'cart1',
  props:{
    message1:String
  },
  methods:{
    sendToCart2(){
      this.$emit('callCart2','妈妈说要做作业了')
    }
  }
}
</script>

组件cart2

<script>
export default {
  name:'cart2',
  props:{
    message1:String
  },
  watch:{
    message1(val){
      console.log(val)
    }
  },
}
</script>

4.非父子组件传值，事件总线（eventbus）的使用方式

方式一：

在main.js，也就是入口文件中，我们在vue的原型上添加一个bus对象；

//在mian.js中
Vue.prototype.bus = new Vue()  //这样我们就实现了全局的事件总线对象

//组件A中，监听事件
this.bus.$on('updata', function(data) {
    console.log(data)  //data就是触发updata事件带过来的数据
})

//组件B中，触发事件
this.bus.$emit('updata', data)  //data就是触发updata事件要带走的数据

方式二：

bus.js文件

// bus.js文件
import Vue from 'vue'
export default new Vue()

组件A：

// 组件A ，监听事件send
<template>
  <div>
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: ''
      }
    },
    created() {
      let _this = this
      // 用$on监听事件并接受数据
      Bus.$on('send', (data) => {
        _this.name = data
        console.log(data)
      })
    },
    methods: {}
  }
</script>

组件B

// 组件B， 触发事件send
<template>
  <div>
    <input type="button" value="点击触发" @click="onClick">
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elValue: '我是B组件数据'
      }
    },
    methods: {
        // 发送数据
      onClick() {
        Bus.$emit('send', this.elValue)
      }
    }
  }
</script>