vue如何給組件動(dòng)態(tài)綁定不同的事件
更新時(shí)間：2022年10月13日 15:41:02 作者：愛(ài)倒騰
這篇文章主要介紹了vue如何給組件動(dòng)態(tài)綁定不同的事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue給組件動(dòng)態(tài)綁定不同的事件
場(chǎng)景
根據(jù)用戶配置的事件動(dòng)態(tài)綁定。也就是用戶可以動(dòng)態(tài)選擇配置 click ，change，blur等事件
需要根據(jù)用戶的配置的事件動(dòng)態(tài)綁定 @click、@change或@bulr
實(shí)際操作代碼如下：
<template>
? <div>
? ? <el-input v-for="(item,index) in list"
? ? ? ? :key="index"
? ? ? ? v-on:[item.event]="item.eventName"></el-input>
? </div>
</template>
<script>
export default {
? ? name: "eventPage",
? ? data() {
? ? ? ? return {
? ? ? ? ? ? list: [{ event: "change" ，eventName："changeName"}]
? ? ? ? ? ? }
? ? ? ? },
? ? methods: {
? ? ? ? changeName(){
? ? ? ? ? ? console.log('change事件')
? ? ? ? }
? ? }
};
</script>以上動(dòng)態(tài)事件?？梢钥s寫(xiě)
<el-input @[item.event]="item.eventName"></el-input>
vue組件綁定事件無(wú)效
在vue中直接在組件上綁定事件是無(wú)效的，例如以下代碼是無(wú)效的：
? ? <div id="app">
? ? ? ? <btn @click='alert(1)'>點(diǎn)擊</btn>
? ? </div>
? ? <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
? ? <script>
? ? ? ? Vue.component('btn', {
? ? ? ? ? ? template:`
? ? ? ? ? ? <button>
? ? ? ? ? ? ? ? <slot></slot>
? ? ? ? ? ? </button>
? ? ? ? ? ? `
? ? ? ? })
? ? ? ? new Vue({
? ? ? ? ? ? el: '#app',?
? ? ? ? ? ? data() {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? });
? ? </script>如果一定要直接在組件上綁定事件也是可以實(shí)現(xiàn)的，
下面提供兩者方法，可以任選其一
1、你可能有很多次想要在一個(gè)組件的根元素上直接監(jiān)聽(tīng)一個(gè)原生事件。這時(shí)，你可以使用 v-on 的 .native 修飾符
<div id="app"> ? ? ? ? <btn @click.native='alert(1)'>點(diǎn)擊</btn> </div>
2、從內(nèi)部傳出來(lái)
?? ?<div id="app">
? ? ? ? <btn @click='alert(1)'>點(diǎn)擊</btn>
? ? </div>
? ? <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
? ? <script>
? ? ? ? Vue.component('btn', {
? ? ? ? ? ? template:`
? ? ? ? ? ? <button @click='handleClick'>
? ? ? ? ? ? ? ? <slot></slot>
? ? ? ? ? ? </button>
? ? ? ? ? ? `,
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? handleClick(e){
? ? ? ? ? ? ? ? ? ? this.$emit('click','e')
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? })
? ? ? ? new Vue({
? ? ? ? ? ? el: '#app',?
? ? ? ? ? ? data() {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? });
? ? </script>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇Vue最新防抖方案(必看篇)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
laravel5.3 vue 實(shí)現(xiàn)收藏夾功能實(shí)例詳解
這篇文章主要介紹了laravel5.3 vue 實(shí)現(xiàn)收藏夾功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-01-01
vue+epubjs實(shí)現(xiàn)電子書(shū)閱讀器的基本功能
這篇文章主要為大家詳細(xì)介紹了如何使用vue+epubjs實(shí)現(xiàn)電子書(shū)閱讀器的基本功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
詳解vue中使用axios對(duì)同一個(gè)接口連續(xù)請(qǐng)求導(dǎo)致返回?cái)?shù)據(jù)混亂的問(wèn)題
這篇文章主要介紹了詳解vue中使用axios對(duì)同一個(gè)接口連續(xù)請(qǐng)求導(dǎo)致返回?cái)?shù)據(jù)混亂的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了vue3中的父子組件通訊詳情，文章以傳統(tǒng)的props展開(kāi)主題相關(guān)資料內(nèi)容，具有一定參考價(jià)值，需要的小伙伴可以參考一下2022-06-06
vue父組件向子組件傳遞多個(gè)數(shù)據(jù)的實(shí)例
下面小編就為大家分享一篇vue父組件向子組件傳遞多個(gè)數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue加載天氣組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Monaco-editor 的 JSON Schema 配置及使用介紹
這篇文章主要為大家介紹了Monaco-editor 的 JSON Schema 配置及使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue中el-table實(shí)現(xiàn)自動(dòng)吸頂效果(支持fixed)
本文主要介紹了vue中el-table實(shí)現(xiàn)自動(dòng)吸頂效果，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue組件文檔（.md）中如何自動(dòng)導(dǎo)入示例（.vue）詳解
這篇文章主要給大家介紹了關(guān)于vue組件文檔（.md）中如何自動(dòng)導(dǎo)入示例（.vue）的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01