Events 将事件从自定义组件传输到模板节点

我有以下组成部分：

<my-button @click="action">Alert</my-button>

但在渲染时，我得到消息“属性或方法”action“不是在实例上定义的，而是在渲染期间引用的”

---

我期望的是，我的

@click

属性（位于

我的按钮

上）将被转换为模板上指定的本机

按钮。
标记所在的父组件没有
操作
方法

您可以执行以下任一操作：

将
@单击
处理程序添加到组件定义中的
标记中，因为
操作
方法在该范围内可用：

// Your button component definition
<template>
  <button @click="action"><slot></slot></button>
</template>

.native
修饰符允许
@click
处理程序侦听
组件根元素的本机click事件

将
ref
属性添加到
标记，以便您可以从父组件中引用按钮组件的
操作
方法：

<my-button ref="btn" @click.native="$refs.btn.action()"></my-button>



但问题是。。。我喜欢直接从HTML代码创建事件（在
mybutton
calling上），而不是在模板上。可能吗？我可以考虑为它创建一个道具，但是我应该声明很多可能的事件类型（比如单击、鼠标进入和离开等等）。代码的问题是您在父组件中将单击处理程序函数指定为
action
，但父组件没有该方法。您必须将单击处理程序移动到按钮组件内部，或者将
操作
方法移动到父组件中。看，我的最新答案是如何做到这两个方面。好吧，我想我还是无法理解。我有一个HTML页面，它使用
my按钮
组件。它可以在不同的上下文中多次使用。的确如此。
我的按钮
被一个真实的
按钮
元素替换，它似乎没有“复制”组件根元素上定义的
@click
。@DavidRodrigues是的，在这种情况下，您需要在click处理程序上使用
.native
修饰符。看我的答案。我已经试过了，但似乎在组件上下文中不起作用。例如，我可以使用
@click.native=“this.alert（'Hello'）”
执行类似于
窗口的操作。alert（）
执行类似操作，但我可以使用
@click.native=“action”
调用组件
操作
方法（在
my-button.vue{methods:{…}
中定义）。
// Your button component definition
<template>
  <button @click="action"><slot></slot></button>
</template>

// Your parent component definition
<template>
  <my-button @click.native="action">Alert</my-button>
</template>

<script>
export default {
  methods: {
    action: function () {
      alert();
    }
  }
}
</script>

<my-button ref="btn" @click.native="$refs.btn.action()"></my-button>