Question

我有以下组件：

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

它被声明为：

<template>
    <button><slot></slot></button>
</template>

和

export default {
    methods: {
        action: function () {
            alert();
        }
    }
}

但是在渲染时，我收到消息“属性或方法”操作“未在实例上定义，但在渲染期间引用”。

我期望将@click上的my-button属性转移到模板上指定的原生button。

Answer 1

<my-button>标记所在的父组件没有action方法。

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

将@click处理程序添加到组件定义中的<button>标记，因为action方法在该范围内可用：

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

将action方法移至父组件，并将.native修饰符添加到click事件中：

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

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

.native修饰符允许@click处理程序侦听<my-button>组件的根元素的本机点击事件。

在ref标记中添加<my-button>属性，以便您可以从父组件中引用按钮组件的action方法：
```
<my-button ref="btn" @click.native="$refs.btn.action()"></my-button>
```

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

1 个答案: