2 回答

TA贡献1829条经验 获得超4个赞
您不需要this在模板中使用关键字。
<button
type="button"
class="btn btn-warning"
v-on:click="$parent.deleteClicked(name)"
style="margin: 3px;">
{{ name }}
</button >
另外,我建议使用自定义事件来实现您想要做的事情。
<!-- Children component -->
<button
type="button"
class="btn btn-warning"
v-on:click="$emit('delete', name)"
style="margin: 3px;">
{{ name }}
</button >
<!-- Parent component -->
<sablonx
v-for="name in names"
:key="name"
:name="name"
@delete="deleteClicked"/>
您可以看到没有参数被直观地传递给函数deleteClicked,但实际发生的是它侦听delete事件,并将从事件传递的数据应用到函数。另一种写法是:
<!-- Parent component -->
<sablonx
v-for="name in names"
:key="name"
:name="name"
@delete="deleteClicked($event)"/>
$event包含要删除的名称的变量在哪里。

TA贡献1744条经验 获得超4个赞
如果要将数据从子组件传输到父组件,则需要使用 $emit (与将数据从父组件传递到子组件时不同 - 然后您想要使用道具,或者如果您将数据从一个组件传递到另一个组件,您可以使用事件总线,这并不总是推荐,但这是另一个主题)
无论如何,代码是:
this.$emit('youremitname', payload);
每当您想发出数据时,您都希望拥有此代码,例如,如果您想在单击按钮后发出数据,您希望将其包含在函数中。(如果您在 @click 属性中使用它,则不需要“this”关键字,只需编写:
$emit('youremitname', payload)
这会将数据传输到父级,但是请确保在使用组件的地方监听它,例如,如果父组件内的组件名称是“客户”,那么您的代码应如下所示:
<Customers @youremitname></Customers>
您还可以使用以下命令在“已安装”或“已创建”生命周期挂钩中侦听发射:
$emit.$on('youremitname', passAFunctionHere).
有关更多信息,请查看 Vue 文档 -自定义事件。
添加回答
举报