原文链接:https://ssshooter.com/2019-10-16-dont-need-emit-on/
在此之前,子组件到父组件的传递事件我一般还是使用 $emit
和 $on
,因为这个操作理解起来并不难,代码一般也挺清晰。
不过今天遇到这么个情况 ——
<div class="button-group">
<button @click="item.reply = !item.reply">
{{item.reply?'取消回复':'回复'}}
</button>
<button @click="item.editing = !item.editing">
{{item.editing?'取消修改':'修改'}}
</button>
<button @click="removeComment(item.id)">删除</button>
</div>
<CommentInput
v-if="item.reply"
@submit="item.reply = false"
:lxid="lxid"
:parentId="item.id"
/>
这是一个评论组件的一部分,button-group
是回复、修改、删除 3 个按钮,点击回复的话下面的 CommentInput
组件会显示。本来想着在那里操作就在哪里取消,但是写完了,产品大人一看,表示不行,按钮不能在上面,应该统一放在评论内容和输入框的下方,不妥协。
心想又要加 $emit
和 $on
虽然麻烦,但不是难事,不过 CommentInput
本来还会复用到其他地方,只有这里需要“取消回复”功能,这又要做一层判断,为了代码简洁这个实现还要好好想想。结果灵感就来了 —— 使用 slot
。
<div class="button-group">
<button @click="replyToggle(item)">回复</button>
<button
v-if="loginInfo.operatorname === item.authorName"
@click="editToggle(item)"
>
{{item.editing?'取消修改':'修改'}}
</button>
<button
v-if="loginInfo.operatorname === item.authorName"
@click="removeComment(item.id)"
>
删除
</button>
</div>
<CommentInput
v-if="item.reply"
@submit="item.reply = false"
:lxid="lxid"
:parentId="parentId||item.id"
>
<div class="button-group">
<button @click="replyToggle(item)">取消回复</button>
</div>
</CommentInput>
slot
本身还是很常用的,只是第一次主动意识到使用 slot
可以显著解决事件传递问题。直接把取消回复按钮用 slot
嵌入 CommentInput
,直接使用父组件的 replyToggle
方法,免去重新写 $emit
和 $on
的麻烦,顺便还解决了其他地方不需要“取消回复”的问题,十分有效!
其实感觉 slot 就像一个闭包,带上了父组件的一切,栖身于子组件。
希望这个分享能给大家一点灵感
PS: 突然想起我坑了一万年的博客评论组件现在依然还坑着……
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。