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