vue有时候你不需要 $emit & $on

时间: 2019-09-15阅读: 271标签: vue

在此之前,子组件到父组件的传递事件我一般还是使用 $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 就像一个闭包,带上了父组件的一切,栖身于子组件。

原文链接:https://ssshooter.com/2019-10-16-dont-need-emit-on/ 

 

吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

链接: http://www.fly63.com/article/detial/5941

Vue.use到底是什么?

我们在使用Vue做项目开发的时候,看到不少轮子都是通过Vue.use来进行使用,感觉甚是高大上。不过Vue.use到底是什么鬼?不妨来看个究竟。

Vue.js最佳实践:五招让你成为Vue.js大师

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站

vue介绍

库是一种插件,是一种封装好的特定方法的集合。提供给开发者使用,控制器在使用者手里。框架是一套架构,会基于自身特定向用户提供一套相当完整的解决方案,控制权在框架本身

Vue最佳实践

Vue 最佳实践,是参考 Vue 官方风格指南并根据过去 Vue 实际项目开发中的经验总结的一套规范建议。本项目的目的是希望每个 Vue 开发者都能尽快熟悉并上手项目代码,志在帮助 Vue 新手开发者及时避免一些不规范的设计和由此而引发的问题

vue知识点总汇

keep-alive它是vue的内置组件在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:

vue中使用v-for时为什么不能用index作为key?

Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设

vue.extend拓展

Vue.extend返回的是一个“拓展实例构造器”,也就是预设了部分选项的Vue实例构造器。经常服务于Vue.component用来生成组件,可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时

Vue基于snabbdom做了哪些事

Snabbdom 核心代码大约只有 200 行。它提供了模块化架构,具有丰富的功能,可通过自定义模块进行扩展。在了解核心 patch 前,需要先了解 snabbdom 的模块化架构思想。

尤雨溪:Vue Function-based API RFC【转】

将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。组件 API 设计所面对的核心问题之一就是如何组织逻辑,以及如何在多个组件之间抽取和复用逻辑。

vue中修改Modal的重置功能怎么写?

工作中遇到弹出模态框形式的修改功能,模态框里面是Form表单,Form表单中的内容是从后台获取的,这时候用户修改完没有提交,而是想重置然后重新修改,怎么办呢?

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全