快捷導(dǎo)航

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

更新時間：2020年02月27日 12:35:56 作者：Rachel~Liu

這篇文章主要介紹了vue學(xué)習(xí)筆記之給組件綁定原生事件操作,結(jié)合實例形式詳細分析了vue.js組件綁定原生事件相關(guān)原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下

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

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

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

這是為什么呢？父組件的點擊事件被vue當(dāng)成自定義事件，點擊后沒有檢測到，這時需要子組件向父組件觸發(fā)點擊'自定義'事件，即 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ù)的校驗</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我定義的事件就是原生事件?。【鸵磺?#63;了

like this:

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>組件參數(shù)的校驗</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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

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

您可能感興趣的文章: