vue中通過ref獲取到元素，如何給元素綁定點(diǎn)擊事件？

在使用ivew的輪播圖的時(shí)候，在輪播圖上添加了一些div，并且綁定了@click事件，但是發(fā)現(xiàn)一個(gè)奇怪的問題，每次banner輪播的時(shí)候，會有一次綁定的click無法點(diǎn)擊，只有在下一次banner顯示的時(shí)候才能點(diǎn)擊

于是我想到，通過ref獲取到這個(gè)元素，動態(tài)的給他添加上@click事件或許能解決我的問題

所以想問問我現(xiàn)在通過ref獲取到了這個(gè)元素，我應(yīng)該怎么給這個(gè)元素綁定@click事件

==============================================================

這是iview 輪播圖組件的問題
我在<CarouselItem>中寫了一些div，跟隨<CarouselItem>輪播而輪播,里面有個(gè)div 綁定了一個(gè)@click事件，
但是這個(gè)按鈕，每次輪播到當(dāng)前，有一次是無法點(diǎn)擊的
比如第一次輪播到當(dāng)前可以點(diǎn)擊，
下一次輪播到當(dāng)前，無法點(diǎn)擊，
一直處于可以點(diǎn)擊-無法點(diǎn)擊-可以點(diǎn)擊-無法點(diǎn)擊這樣的狀態(tài)

`
<Carousel @on-change="bannerIndex" class="banner-box" loop dots="inside" :autoplay="!clickLQ" :autoplay-speed="4000" arrow="hover" :height="600">

    <CarouselItem>
      <div class="bannerimg-box" :style="{backgroundImage:'url(/static/images/banner_01.png)'}"></div>
      <div class="slogan-center" :class="{'en_slogan':$store.state.lang == 'en' ? true:false}">
        <div class="text-slogan-name">{{$t('home.sloganName')}}</div>
        <div class="text-slogan-content">{{$t('home.sloganContent1')}}</div>
        <div class="text-slogan-content">{{$t('home.sloganContent2')}}</div>
        <img class="ball" src="/static/images/banner_ball2.png" alt="">
        <div class="coming-soon">{{$t('home.coming_soon')}}</div>
      </div>
    </CarouselItem>
    <CarouselItem>
      <div class="bannerimg-box" :style="{backgroundImage:'url(/static/images/banner_02.jpg)'}"></div>
      <div class="banner2">
        <div class="banner2_title">{{$t('home.banner2_title')}}</div>
        <div class="banner2_1_text">{{$t('home.banner2_1_text')}}</div>
        <div class="banner2_2_text">{{$t('home.banner2_2_text')}}</div>
        <div class="btn_login_register">
          <div v-if="!$store.state.login">
            <a :href="$store.state.trans_url+'/login'" class="btn_login" >{{$t('home.btn_login')}}</a>
            <a :href="$store.state.trans_url+'/register'" class="btn_register" >{{$t('home.btn_register')}}</a>
          </div>
          <div v-if="$store.state.login">
            <a :href="$store.state.trans_url+'/account/invite'" class="btn_yq" >{{$t('home.btn_yq')}}</a>
          </div>
          <div class="tips_text">
            {{$t('home.tips_text1')}} &nbsp;<span ref="bindClickYq" @click="lingquBtn(!$store.state.login ? true : $store.state.myInfo.airDropStatus ? true:false)">{{$t('home.tips_text2')}}</span>
          </div>
        </div>
      </div>
    </CarouselItem>
  </Carousel>
`

回答

編輯回答

蔚藍(lán)色

首先回答你的問題

通過ref獲取到了這個(gè)元素，我應(yīng)該怎么給這個(gè)元素綁定@click事件
假如你有個(gè)ref=dom的div，this.$refs.dom就直接是這個(gè)具體的dom元素了，你可以把它打印出來，然后是綁定事件this.$refs.dom.addEventListener('click',function(){});

然后呢，建議在vue中不要直接去操作dom，就類似于這種自己去添加點(diǎn)擊事件，可以直接在template里面@click去綁定的，出現(xiàn)你說的那些詭異的現(xiàn)象，多半是事件冒泡了，你可以通過vue的事件修飾符去解決這些問題，題主先自己試試吧，你沒貼代碼，我也不好判斷具體是不是事件冒泡的問題。

2018年7月2日 02:28