问题描述
<my-component>
<template v-slot:myslot>
<b-form-group
label="SlotEG"
label-for="sltLbl"
label-class="font-weight-bold pt-0"
>
<b-form-checkBox
:id="myId"
:name="myName"
></b-form-checkBox>
</b-form-group>
</template>
<my-component>
在我的子组件中,我有方法,我需要在单击复选框以捕获复选框事件的同时调用该方法。
<template>
<b-col cols="3" v-if="hasMySlot()">
<slot name="myslot"></slot>
</b-col>
</template>
<script>
export default {
methods:{
myMethod() {
alert("Hi")
}
}
}
</script>
解决方法
使用scoped slot传递方法:
<!-- MyComponent -->
<slot name="myslot" :myMethod="myMethod" />
然后,您可以destructure the slot prop使用传递的方法,并将其绑定到复选框的处理程序:
<!-- Parent -->
<my-component>
<template v-slot:myslot="{ myMethod }">
...
<b-form-checkbox @checked="myMethod" />
</template>
</my-component>