vue自定義組件如何添加使用原生事件
自定義組件如何添加使用原生事件
自定義組件(Components)是vue的重要知識(shí)塊之一，使用中不少人會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題：為什么我在組件里綁定click事件不起作用？這里先看看原因吧。
在自定義組件中直接綁定原生事件vue可是"不待見(jiàn)"的，它會(huì)認(rèn)為你沒(méi)有定義這個(gè)事件，所以沒(méi)有任何反應(yīng)。
哪些是原生事件？
例如click單擊、mouseover鼠標(biāo)移入、mouseout鼠標(biāo)移出、keyup鍵盤(pán)按下抬起、keydown鍵盤(pán)按下…等等一系列由官方提供的事件都是原生事件。那么咋辦？
. $emit()傳遞
<body> ? ?<div id="app"> ? ? ? ?<Jsxj :jsxj="message" @click="JsxjChange"></Jsxj> ? ?</div> </body>
<script>
? ?var vm = new Vue({
? ? ? ?el:"#app",
? ? ? ?data:{
? ? ? ? ? ?message:"Hello World"
? ? ? ?},
? ? ? ?components:{
? ? ? ? ? ?Jsxj:{
? ? ? ? ? ? ? ?props:['jsxj'],
? ? ? ? ? ? ? ?template:`<p @click="pChange">{{jsxj}}</p>`,
? ? ? ? ? ? ? ?methods: {
? ? ? ? ? ? ? ? ? ?pChange(){
? ? ? ? ? ? ? ? ? ? ? ?this.$emit("click")
? ? ? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?},
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?methods: {
? ? ? ? ? ?JsxjChange(){
? ? ? ? ? ? ? ?this.message="Hi, Jsxj"
? ? ? ? ? ?}
? ? ? ?},
? ?})
</script>第一種方法是通過(guò)$emit()傳遞事件。如代碼：我們?cè)谧远x組件Jsxj中設(shè)置模板，在模板中<p>原生元素上觸發(fā)原生click事件，調(diào)用函數(shù)pChange()，函數(shù)用$emit()向上傳遞自定義事件click，父組件Jsxj接收到這個(gè)事件，于是便可以正常觸發(fā)click。
. native屬性
<body> ? ?<div id="app"> ? ? ? ?<Jsxj :jsxj="message" @click.native="JsxjChange"></Jsxj> ? ?</div> </body>
<script>
? ?var vm = new Vue({
? ? ? ?el:"#app",
? ? ? ?data:{
? ? ? ? ? ?message:"Hello World"
? ? ? ?},
? ? ? ?components:{
? ? ? ? ? ?Jsxj:{
? ? ? ? ? ? ? ?props:['jsxj'],
? ? ? ? ? ? ? ?template:`<p>{{jsxj}}</p>` ?
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?methods: {
? ? ? ? ? ?JsxjChange(){
? ? ? ? ? ? ? ?this.message="Hi, Jsxj"
? ? ? ? ? ?}
? ? ? ?},
? ?})
</script>第二種方法相對(duì)簡(jiǎn)單。
代碼大同小異，不過(guò)我們不再用$emit()從子向父?jìng)鬟f自定義事件，太麻煩了，而是用native屬性幫忙@click.native="JsxjChange"，這樣組件就會(huì)知道這是原生事件click，調(diào)用相應(yīng)的函數(shù)。
vue使用原生事件
在項(xiàng)目中用到element ui 這個(gè)ui框架，有些組件沒(méi)有封裝的事件，例如click事件 ，我在使用時(shí)感覺(jué)不起作用，后來(lái)查看vue官方文檔，發(fā)現(xiàn)有些原生事件是不提供，還有我們自定義的組件也是不能直接使用click事件的 ，需要在click事件后寫(xiě)上.native才能生效
即 例如：
<el-card @click.native = "enter"></el-card>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue router 源碼概覽的案例分析，本文通過(guò)實(shí)例代碼案例分析給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了vue（2.x，3.0）配置跨域代理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue中el-checkbox全選、反選、多選的實(shí)現(xiàn)
這篇文章主要介紹了vue中el-checkbox全選、反選、多選的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue使用pinia實(shí)現(xiàn)全局無(wú)縫通信
這篇文章主要為大家詳細(xì)介紹了vue如何使用pinia實(shí)現(xiàn)全局無(wú)縫通信,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下2023-11-11
對(duì)axios進(jìn)行封裝以及將API接口按業(yè)務(wù)模塊統(tǒng)一管理，有助于我們簡(jiǎn)化代碼，方便后期維護(hù)。本文介紹了如何用vue封裝axios請(qǐng)求，感興趣的同學(xué)，可以參考下。2021-06-06
VueQuillEditor富文本上傳圖片(非base64)
這篇文章主要介紹了VueQuillEditor富文本上傳圖片(非base64),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vue實(shí)現(xiàn)多個(gè)數(shù)組合并
這篇文章主要介紹了vue實(shí)現(xiàn)多個(gè)數(shù)組合并方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue??vuex配置項(xiàng)和多組件數(shù)據(jù)共享案例分享
這篇文章主要介紹了Vue??vuex配置項(xiàng)和多組件數(shù)據(jù)共享案例分享，文章圍繞Vue?Vuex的相關(guān)資料展開(kāi)配置項(xiàng)和多組件數(shù)據(jù)共享的案例分享，需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了關(guān)于找到任意組件實(shí)例的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue-quill-editor富文本編輯器簡(jiǎn)單使用方法
這篇文章主要為大家詳細(xì)介紹了vue-quill-editor富文本編輯器簡(jiǎn)單使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09