Vue中绑定动态事件

文章目录

• 一、背景说明
• 二、核心实现点
• 二、Vue2中动态事件的绑定
• 二、Vue3中动态事件的绑定

一、背景说明

有些情况我们需要根据情况不同绑定不同的事件，比如：当这个元素为button的时候我需要绑定click事件，当为input的时候，我需要绑定change事件

二、核心实现点

 @[eventName]="eventHanldler"

• eventName是个响应式数据，它的值就是你的事件名称，如‘click’、‘input’、‘change’等，
• eventHanldler是你的事件处理函数

二、Vue2中动态事件的绑定

<template>
  <div>
    <!-- native在组件上面绑定原生事件 -->
    <!-- component动态组件  绑定is修改当前展示的组件 -->
    <component
      @[eventName].native="eventHanldler"
      :is="currentComponent"
    ></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 动态组件名，myButton为按钮组件 myInput为输入框组件
      currentComponent: "myButton",
      // 事件名
      eventName: "click",
    };
  },
  methods: {
    // 事件处理函数
    eventHanldler() {},
    // 改变事件名字
    changeEventName() {
      this.eventName = "change";
    },
    // 改变组件
    changeComponent() {
      this.currentComponent = "myInput";
    },
  },
};
</script>

二、Vue3中动态事件的绑定

<script setup>
import { ref } from "vue";
// 动态组件名，myButton为按钮组件 myInput为输入框组件
const currentComponent = ref("myButton");
// 事件名
const eventName = ref("click");

// 事件处理函数
const eventHanldler = () => {};
// 改变事件名字
const changeEventName = () => {
  eventName.value = "change";
};
// 改变组件
const changeComponent = () => {
  currentComponent.value = "myInput";
};
</script>

<template>
  <!-- component动态组件  绑定is修改当前展示的组件 -->
  <component @[event]="eventHanldler" :is="currentComponent"></component>
</template>