溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下vue自定義組件怎么添加使用原生事件的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
自定義組件(Components)是vue的重要知識塊之一，使用中不少人會發現一個問題：為什么我在組件里綁定click事件不起作用？這里先看看原因吧。
在自定義組件中直接綁定原生事件vue可是"不待見"的，它會認為你沒有定義這個事件，所以沒有任何反應。
哪些是原生事件？
例如click單擊、mouseover鼠標移入、mouseout鼠標移出、keyup鍵盤按下抬起、keydown鍵盤按下…等等一系列由官方提供的事件都是原生事件。那么咋辦？
<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中設置模板，在模板中<p>原生元素上觸發原生click事件，調用函數pChange()，函數用$emit()向上傳遞自定義事件click，父組件Jsxj接收到這個事件，于是便可以正常觸發click。
<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，調用相應的函數。
在項目中用到element ui 這個ui框架，有些組件沒有封裝的事件，例如click事件 ，我在使用時感覺不起作用，后來查看vue官方文檔，發現有些原生事件是不提供，還有我們自定義的組件也是不能直接使用click事件的 ，需要在click事件后寫上.native才能生效
即 例如：
<el-card @click.native = "enter"></el-card>
以上就是“vue自定義組件怎么添加使用原生事件”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
