1，給vue元件繫結事件時候，必須加上native ，否則會認為監聽的是來自Item元件自定義的事件

2，等同於在子元件中： 子元件內部處理click事件然後向外傳送click事件：$emit("click".fn)

<Item @click.native = "shijian()"></Item>

補充知識：vue——元件間（兄弟元件間）事件派發與接收

法一

main.js

在初始化vue之前，給 data 新增一個名為 event 的空vue物件

new Vue({
 render: h => h(App),router,store,data: {
  event: new Vue()
 }
}).$mount('#app')

元件一：

methods: {
   addCart (e) {
    let pos = {
     x: parseInt(e.target.getBoundingClientRect().x + 4),y: parseInt(e.target.getBoundingClientRect().y + 4)
    }
    this.$root.event.$emit('ballPosition',pos)
   }
  }

元件二：

  created () {
   this.$root.event.$on('ballPosition',(target) => {
    this._initBall(target)
   })
  },methods: {
   _initBall (target) {
    this.ball = true
    this.ballMassage = target
   }
 }

完整案例：

拋物小球動畫：

created () {
   this.$root.event.$on('ballPosition',methods: {
   _initBall (el) {
    this.ball.show = true
    this.ball.el = el
   },beforeEnter (el) {
    let pos = this.ball.el.target.getBoundingClientRect()
    el.style.top = `${pos.y}px`
    el.style.left = `${pos.x}px`
   },enter (el,done) {
    // 觸發動畫重繪
    el.offsetHeight
    let [x,y] = [parseInt(this.$refs.cart.getBoundingClientRect().x + 4),parseInt(this.$refs.cart.getBoundingClientRect().y + 8)]
    el.style.top = `${y}px`
    el.style.left = `${x}px`
    el.style.transition = `left .1s linear,top .1s cubic-bezier(.63,.02,.96,.56)`
    done()
   },afterEnter () {
    this.ball.show = false
   }
  },

法二

中央通訊： let eventVue = new Vue()

A methods:{function(){eventVue.$emit('自定義事件','資料')}}

B created(){eventVue.$on('A 傳送過來的事件名','函式')}

中央通訊：

let eventVue = new Vue()

兄弟元件 A 如下：

<template>
   <div class="components-a">
      <button @click="abtn">A按鈕</button>
   </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
   name: 'app',data () {
    return {
        ‘msg':"我是元件A"
    }
   },methods:{
      abtn:function(){
          eventVue.$emit("myFun",this.msg)  //$emit這個方法會觸發一個事件
      }
   }
}
</script>

兄弟元件 B 如下：

<template>
   <div class="components-a">
     <div>{{btext}}</div>
   </div>
</template>
<script>
import eventVue from '../../js/event.js'
export default {
  name: 'app',data () {
    return {
      'btext':"我是B元件內容"
    }
  },created:function(){
    this.bbtn();
  },methods:{
    bbtn:function(){
      eventVue.$on("myFun",(message)=>{  //這裡最好用箭頭函式，不然this指向有問題
         this.btext = message   
      })
    }
  }
}
</script>

以上這篇vue元件新增事件@click.native操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。