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