如何在子组件的按钮上添加v-model并在父组件中绑定它

Question

i am using vue3 with options api

如下面发布的代码所示，在

NotifDimsToLSRIncomformability

组件中，我有一个按钮。并且

NotifDimsToLSRIncomformability

托管在父组件中，如图所示 在下面发布的代码中。

我想听一下父组件中

NotifDimsToLSRIncomformability

的按钮点击。或者换句话说，我想要实现的是，当单击按钮时，我想要 监听父/托管组件中的这些点击，并根据该按钮的可点击性实现一些副作用。

我的尝试是： 我向按钮引入了指令

v-model

并在父/托管组件上绑定到它，如下所示，但这不起作用

请让我知道如何绑定父/托管组件中按钮的可点击性

托管组件

<template>
<NotifDimsToLSRIncomformability
    v-bind:showNotifDimsToLSRIncomformability="showNotifDimsToLSRIncomformability"
    v-model:vModel="vModel"  //<<<<==========================HERE
></NotifDimsToLSRIncomformability>

**NotifDimsToLSRIncomformability** **按钮**

<cds-button 
    class="clsBtnClosePosition"
    action="primary"
    status="primary"
    size="md"
    type="button"
    v-model="vModel"//<<<<==========================HERE
    @click="onCloseNotification()"
> X
</cds-button>

在上面的问题中有解释

Answer 1

子级中的

onCloseNotification

内部函数（您应该删除名称后面的大括号 - 事件处理程序不需要大括号，除非您想立即调用它们并将函数的结果用作事件处理程序 - 而不是函数本身）添加以下行：

this.$emit('click'); 然后在父组件中，处理来自子组件的

click

 事件

<NotifDimsToLSRIncomformability
    v-bind:showNotifDimsToLSRIncomformability="showNotifDimsToLSRIncomformability"
    v-model:vModel="vModel"
    @click="onButtonClicked"  //<<<<==========================HERE
/>