溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
