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我定義的事件就是原生事件??！就一切?了
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è)計有所幫助。
相關(guān)文章
剛剛接到領(lǐng)導(dǎo)通知，需要實現(xiàn)搜索功能，因為項目是vue的而且是手機端，對我來說有點小難度。經(jīng)過小編的一番思索最終還是解決了，今天小編把實現(xiàn)過程分享到腳本之家平臺，需要的朋友參考下2020-02-02
詳解vue-router 動態(tài)路由下子頁面多頁共活的解決方案
這篇文章主要介紹了vue-router 動態(tài)路由下子頁面多頁共活的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
element中async-validator異步請求驗證使用
本文主要介紹了element中async-validator異步請求驗證使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
Vue3的確可以直接使用tsx開發(fā),唯一需要處理的就是children,而且處理起來還是比較不爽的,下面這篇文章主要給大家介紹了關(guān)于TSX常見簡單入門用法之Vue3+Vite的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了聊聊vue 中的v-on參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
這篇文章主要介紹了vue設(shè)置全局訪問接口API地址操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
快速解決Vue、element-ui的resetFields()方法重置表單無效的問題
這篇文章主要介紹了快速解決Vue、element-ui的resetFields()方法重置表單無效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了Vue自定義圖片懶加載指令v-lazyload，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
詳解Vue自定義指令如何實現(xiàn)處理圖片加載失敗的碎圖
這篇文章主要介紹了詳解Vue自定義指令如何實現(xiàn)處理圖片加載失敗的碎圖，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
Vue實現(xiàn)動態(tài)添加或者刪除對象和對象數(shù)組的操作方法
這篇文章主要介紹了在Vue項目中實現(xiàn)動態(tài)添加或者刪除對象和對象數(shù)組的操作方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09