vue組件添加事件@click.native操作

更新時(shí)間：2020年10月30日 11:14:02 作者：練洗之命

這篇文章主要介紹了vue組件添加事件@click.native操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧

1，給vue組件綁定事件時(shí)候，必須加上native ，否則會(huì)認(rèn)為監(jiān)聽的是來(lái)自Item組件自定義的事件

2，等同于在子組件中：子組件內(nèi)部處理click事件然后向外發(fā)送click事件：$emit("click".fn)

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

補(bǔ)充知識(shí)：vue——組件間（兄弟組件間）事件派發(fā)與接收

法一

main.js

在初始化vue之前，給 data 添加一個(gè)名為 event 的空vue對(duì)象

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
   }
 }

完整案例：

拋物小球動(dòng)畫：

created () {
   this.$root.event.$on('ballPosition', (target) => {
    this._initBall(target)
   })
  },
  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) {
    // 觸發(fā)動(dòng)畫重繪
    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('自定義事件','數(shù)據(jù)')}}

B created(){eventVue.$on('A 發(fā)送過來(lái)的事件名','函數(shù)')}

中央通信：

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這個(gè)方法會(huì)觸發(fā)一個(gè)事件
      }
   }
}
</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組件內(nèi)容"
    }
  },
  created:function(){
    this.bbtn();
  },
  methods:{
    bbtn:function(){
      eventVue.$on("myFun",(message)=>{  //這里最好用箭頭函數(shù)，不然this指向有問題
         this.btext = message   
      })
    }
  }
}
</script>

以上這篇vue組件添加事件@click.native操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: