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)事件。可以縮寫
<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中動(dòng)態(tài)參數(shù)與計(jì)算屬性的使用方法
在平時(shí)vue開(kāi)發(fā)中,我們經(jīng)常會(huì)用到計(jì)算屬性(計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值)來(lái)計(jì)算我們需要的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue中動(dòng)態(tài)參數(shù)與計(jì)算屬性使用的相關(guān)資料,需要的朋友可以參考下2021-08-08
vue中v-if和v-for一起使用的弊端及解決辦法(同時(shí)使用 v-if 和 v-for不
當(dāng) v-if 和 v-for 同時(shí)存在于一個(gè)元素上的時(shí)候，v-if 會(huì)首先被執(zhí)行，這篇文章主要介紹了vue中v-if和v-for一起使用的弊端及解決辦法,需要的朋友可以參考下2023-07-07
vue使用directive限制表單輸入整數(shù)、小數(shù)的方法
這篇文章主要介紹了vue使用directive限制表單輸入整數(shù)，小數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue-cli構(gòu)建的項(xiàng)目如何手動(dòng)添加eslint配置
這篇文章主要介紹了vue-cli構(gòu)建的項(xiàng)目如何手動(dòng)添加eslint配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單跑馬燈特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
vue.config.js中配置分包策略及常見(jiàn)的配置選項(xiàng)
在Vue.js中分包（Code Splitting）是一種將應(yīng)用程序代碼拆分為不同的塊或包的技術(shù),從而在需要時(shí)按需加載這些包,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中配置分包策略及常見(jiàn)的配置選項(xiàng)的相關(guān)資料,需要的朋友可以參考下2024-02-02
Vue+Element UI 樹(shù)形控件整合下拉功能菜單（tree + dropdown +input）
這篇文章主要介紹了Vue+Element UI 樹(shù)形控件整合下拉功能菜單（tree + dropdown +input）的方法，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-08-08
vue3為什么要用proxy替代defineProperty
這篇文章主要介紹了vue3為什么要用proxy替代defineProperty,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了前端框架Vue.js中Directive知識(shí)，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了vue input框的禁用和可輸入問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04