Vue.js如何在组件内部插槽的标签中触发emit事件关闭模态框

问题原因 #

你写的代码有两个核心问题导致footer插槽的关闭按钮不生效：

• 你给Cancel按钮绑定的是@close事件，但按钮是原生DOM元素，不存在close原生事件，只有click事件
• 插槽内的内容是在父组件作用域中渲染的，你直接操作父组件的isActive变量是完全合法的，不需要走组件自定义事件也能实现需求

解决方案1：直接绑定click事件修改父组件变量（最简单） #

直接修改index.html里Cancel按钮的事件绑定，把@close改成@click即可，插槽内容可以直接访问父实例的isActive变量：

<div slot="footer"> 
    <button class="button is-success">Save changes</button>
    <!-- 仅需要修改事件绑定的名称即可 -->
    <button class="button" @click="isActive = false">Cancel</button>
</div>

解决方案2：触发modal组件的close自定义事件（更符合组件封装规范） #

如果你不想在插槽里直接操作父组件变量，要复用modal组件的close事件逻辑，可以通过$parent触发modal组件的自定义事件：

<div slot="footer"> 
    <button class="button is-success">Save changes</button>
    <button class="button" @click="$parent.$emit('close')">Cancel</button>
</div>

如果担心组件层级变化导致$parent指向错误，也可以给modal组件加ref属性，通过ref触发事件：

<!-- 给modal组件添加ref标识 -->
<modal ref="modal" v-if="isActive" @close="isActive = false">
    <template slot="header"> Title</template>
    some thing...
    <div slot="footer"> 
        <button class="button is-success">Save changes</button>
        <button class="button" @click="$refs.modal.$emit('close')">Cancel</button>
    </div>
</modal>

两种方案都可以正常实现需求，第一种写法更简单直接，第二种更符合组件解耦的设计思路。

内容的提问来源于stack exchange，提问作者Yassine