vue學(xué)習(xí)筆記之給組件綁定原生事件操作示例

發(fā)布時(shí)間：2020-09-10 08:19:51 來(lái)源：腳本之家閱讀：149 作者：Rachel~Liu 欄目：web開(kāi)發(fā)

本文實(shí)例講述了vue學(xué)習(xí)筆記之給組件綁定原生事件操作。分享給大家供大家參考，具體如下：

當(dāng)在父組件中定義一個(gè)點(diǎn)擊事件，并且在父組件的methods中定義了這個(gè)點(diǎn)擊事件時(shí)，在頁(yè)面上點(diǎn)擊并不會(huì)有什么反應(yīng)。那么該怎么辦呢？

我們可以在子組件的template中的dom上定義一個(gè)點(diǎn)擊事件（原生事件），并且在子組件的methods中定義該點(diǎn)擊事件，然而點(diǎn)擊頁(yè)面時(shí)也只會(huì)alert(child click )。

這是為什么呢？父組件的點(diǎn)擊事件被vue當(dāng)成自定義事件，點(diǎn)擊后沒(méi)有檢測(cè)到，這時(shí)需要子組件向父組件觸發(fā)點(diǎn)擊'自定義'事件，即 this.$emit('change') 。then，完成。先響應(yīng)了child click，然后響應(yīng)了click。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>組件參數(shù)的校驗(yàn)</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <child @change="handleClick"></child>  <!--此處父組件，相當(dāng)于自定義事件-->
</div>
</body>
</html>
<script>
  Vue.component('Child', {
    template: '<div @click="handleChildClick">child</div>',   /* 原生事件 */
    methods:{
      handleChildClick:function () {
        alert("child click")
        this.$emit('change') // 向父組件傳遞自定義事件
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    methods:{
      handleClick:function () {
        alert("click");
      }
    }
  })
</script>

但是這樣好麻煩哦??！怎么辦呢？

我們可以直接在父組件定義的@click后面加上native，告訴vue我定義的事件就是原生事件！！就一切?了

like this:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>組件參數(shù)的校驗(yàn)</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <child @click.native="handleClick"></child>  <!--此處聲明，原生事件-->
</div>
</body>
</html>
<script>
  Vue.component('Child', {
    template: '<div>child</div>'
  })
  var vm = new Vue({
    el: '#app',
    methods:{
      handleClick:function () {
        alert("click");
      }
    }
  })
</script>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

向AI問(wèn)一下細(xì)節(jié)

vue學(xué)習(xí)筆記之給組件綁定原生事件操作示例

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽