Vue.js中如何为通用按钮模板动态绑定事件？

让我们一步步排查你的问题，然后给出正确的实现方式：

第一次尝试的问题 #

你最初的代码里有两个关键错误：

• 模板里用了:click="clickevent"——:xxx是用来绑定属性的，而点击事件需要用@click（v-on:click的简写）来绑定。
• 即使修正了绑定语法，直接通过props传递事件方法的写法不够规范，Vue组件间的事件通信更推荐用自定义事件的方式，先来看你第二次尝试的问题。

第二次尝试的问题 #

你修改后的代码里存在两处核心问题：

1. 子组件ac-child没有定义对应的prop来接收父组件传递的greet方法，导致clickevent这个变量在子组件中不存在。
2. 父组件里用:onClick="greet"是错误的写法——:xxx会把greet作为表达式求值，这里你要么通过props传递方法引用，要么直接监听子组件的事件。

正确的实现方式 #

方式1：通过Props传递方法（简单直接） #

这种方式适合简单场景，直接把父组件的方法作为prop传给子组件，子组件按钮点击时调用该方法：

// 父组件
Vue.component('ac-parent', {
  methods: {
    greet: function () {
      alert("Hiey");
    }
  },
  template: `
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-3 col-md-4">
          <div>
            <!-- 将父组件的greet方法作为clickHandler prop传给子组件 -->
            <ac-child :click-handler="greet">Custom value to replace generic slot value</ac-child>
          </div>
        </div>
      </div>
    </div>
  `
});

// 子组件
Vue.component('ac-child', {
  // 定义props接收父组件传递的方法
  props: ['clickHandler'],
  template: `
    <button type="button" @click="clickHandler" class="btn btn-secondary btn-sm">
      <slot>button</slot>
    </button>
  `
});

方式2：使用Vue自定义事件（推荐，符合组件通信规范） #

这种方式更贴合Vue的设计理念，子组件通过$emit触发自定义事件，父组件监听该事件并执行对应逻辑，让组件间解耦性更强：

// 父组件
Vue.component('ac-parent', {
  methods: {
    greet: function () {
      alert("Hiey");
    }
  },
  template: `
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-3 col-md-4">
          <div>
            <!-- 监听子组件触发的custom-click事件，执行greet方法 -->
            <ac-child @custom-click="greet">Custom value to replace generic slot value</ac-child>
          </div>
        </div>
      </div>
    </div>
  `
});

// 子组件
Vue.component('ac-child', {
  template: `
    <button type="button" @click="$emit('custom-click')" class="btn btn-secondary btn-sm">
      <slot>button</slot>
    </button>
  `
});

两种方式的核心逻辑 #

• 方式1：子组件通过props拿到父组件的方法引用，点击按钮时直接调用该方法，本质是把父组件的方法传递到子组件中执行。
• 方式2：子组件只负责触发事件，不关心父组件要执行什么逻辑；父组件监听事件并处理，这种模式让子组件更通用，适合复用场景。

内容的提问来源于stack exchange，提问作者Parth Bhaidani