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>