vue學習筆記之給元件繫結原生事件操作示例
阿新 • • 發佈：2020-02-28
本文例項講述了vue學習筆記之給元件繫結原生事件操作。分享給大家供大家參考，具體如下：
當在父元件中定義一個點選事件，並且在父元件的methods中定義了這個點選事件時，在頁面上點選並不會有什麼反應。那麼該怎麼辦呢？
我們可以在子元件的template中的dom上定義一個點選事件（原生事件），並且在子元件的methods中定義該點選事件，然而點選頁面時也只會alert(child click )。
這是為什麼呢？父元件的點選事件被vue當成自定義事件，點選後沒有檢測到，這時需要子元件向父元件觸發點選'自定義'事件，即 this.$emit('change') 。then，完成。先響應了child click，然後響應了click。
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>元件引數的校驗</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child @change="handleClick"></child> <!--此處父元件，相當於自定義事件-->
</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>元件引數的校驗</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程式設計有所幫助。