vue有时候你不需要 $emit & $on入门知识_vue使用攻略

在此之前,子组件到父组件的传递事件我一般还是使用 $emit 和 $on,因为这个操作理解起来并不难,代码一般也挺清晰。不过今天遇到这么个情况 ——<bu

vue有时候你不需要 $emit & $on入门知识

在此之前,子组件到父组件的传递事件我一般还是使用 $emit 和 $on,因为这个操作理解起来并不难,代码一般也挺清晰。

vue有时候你不需要 $emit & $on入门知识_vue使用攻略

不过今天遇到这么个情况 ——

<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 就像一个闭包,带上了父组件的一切,栖身于子组件。

 

海计划公众号
(0)
上一篇 2020/03/24 05:37
下一篇 2020/03/24 05:37

您可能感兴趣的内容

  • Truffle设置Solidity版本 指南攻略_框架菜鸟教程

    当使用truffle开发以太坊solidity合约时,经常碰到的一个问题,就是你的solidity合约代码所要求的编译器版本,与truffle预装的solitiy编译器版本不匹配。本文将介绍如何更改truffle中的solidity版本。如果要快速掌握以太坊的开发,推荐汇智网的以太坊开发系列教程。 1、问题重现由于solidity比较新,语法还在变换当中,

    2020/03/30
  • Nginx常用功能基础知识入门_nginx小白基础

    nginx作为一个高性能的web服务器,想必大家垂涎已久,蠢蠢欲动,想学习一番了吧,语法不多说,网上一大堆。下面博主就nginx的非常常用的几个功能做一些讲述和分析,学会了这几个功能,平常的开发和部署就不是什么问题了。因此希望大家看完之后,能自己装个nginx来学习配置测试,这样才能真正的掌握它。文章提纲:正向代理反向代理透明代理负载均衡静态服务器nginx

    2020/03/24
  • JS使用textarea模拟post提交表单菜鸟教程下载_表单菜鸟教程下载

    textarea 标签textarea代表HTML表单多行输入域textarea标签是成对出现的,以结束属性:cols — 多行输入域的列数rows — 多行输入域的行数accesskey — 表单的快捷键访问方式disabled — 输入域无法获得焦点,无法选择,以灰色显示,在表单中不起任何作用re

    2020/03/24
  • vue源码中的检测方法小白知识_源码入门基础

    // 判断是否为undefined或nullconst isDef = (v) => {return v !== undefined && v !== null
    }// 判断是否为Promise 函数const isPromise = (val) => {return (val !== undefine &&typeof val.then === ‘func

    2020/03/24
  • Web前端开发怎么入门?入门百科_前端使用说明

    Web前端开发怎么入门,主要都有哪些要素组成?Web前端开发是由网页制作演变而来的,主要由HTML、CSS、JavaScript三大要素组成。专业的Web前端开发入门知识也一定会包含这些内容,下面就给大家简单介绍一下。HTML,超文本标记语言,标准通用标记语言下的一个应用。包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关

    2020/03/24
  • 程序员自我欺骗的 9 个谎言使用指南_谎言小白知识

    “我们对计算机的自信可能使我们犯错误,因为我们希望将现实世界都转化为代码。”程序员有充分的理由感到自豪,因为其他人是无权进入 数据库 并更改的。世界越是依赖计算机定义,程序员的能力就越强。实际上,没有什么代码是完美的代码,计算机也会经常犯错误。当然,许多问题源于我们的程序员所做的假设,这些假设虽然在某些时候是正确的,但在根本上是不正确的。正如马克·吐温(Ma

    2020/03/22
  • React中富文本编辑器的技术选型调研小白基础_react使用教程

    前言富文本编辑器是项目中不可或缺的部分,目前市面上可以选择的富文本编辑器种类繁多,如何在项目中选择一款集轻量,美观,稳定,坑少,满足需求的富文本编辑器变成了团队中一个重要的问题。现在项目中使用的是 WangEditor,为了寻找到更好的替代品,我针对 Ant Design 官方推荐的两款的富文本编辑器做了调研。Ant Design 称它们为“社区精选组件”,

    2020/04/03
  • H5中的history方法Api介绍基础知识教程_api基础教程

    下面来跟大家一起来捋捋history的Api方法和使用:history.pushState(data,title,url):在浏览器中新增一条历史记录;data会在onpopstate事件触发时作为参数传递过去,title为页面标题,url为页面地址;history.replaceState(data,title,url):在浏览器中替换当前历史记录;dat

    2020/03/26
  • Nautil 中使用双向数据绑定小白教程_数据绑定使用帮助

    原文:https://segmentfault.com/a/1190000020548329虽然是基于 react 的框架,但是在 nautil 中可以使用双向数据绑定,这得益于基于观察者模式的开发思路。在 react 中使用双向绑定并非没有需求,react 严格的单向数据流,严重影响了开发者的发挥空间,特别是在表单组件的使用中,很容易陷入回调地狱,即使 r

    2020/03/24
  • Js防抖函数入门知识_防抖指南攻略

    1.使用场景:是在写keyup事件的时候,每次触发,都会请求后台接口,为了避免,每次请求,键盘弹起之后,隔上一段时间再去请求,所以用防抖函数2.概念:(1)什么是防抖:多次事件触发后、事件处理函数只执行一次,并且是在触发操作结束时执行。(2)原理:延时操作处理函数、若设定的延时到来之前、再次触发函数、则清除上一次的延时操作定时器、重新定时3.使用:原先代码这

    2020/03/26
  • HTML5实现无刷新修改URL小白帮助_url基础指南

    前言今天在做一个vue的搜索功能,需要从搜索结果页面跳转到细节页面,然后点击返回还能返回到刚刚的结果页面,如果只用window.history.go(-1)当然会重新刷新搜索页面,当然是不行的。我尝试了俩种方式来修改url:window.location.href,拼接一个搜索的key值,点击搜索的同时,刷新了页面,url改变了,功能是实现了,可是bug来了

    2020/03/23
  • Jira零基础入门_Jira和confluence俗称的pms,项目及工作任务管理

    Jira基础教程 官方网址:https://www.atlassian.com/ 简介描述:Jira和confluence俗称的pms,项目及工作任务管理 Millions of …

    2020/03/06
  • vue封装axios和利用拦截器监控返回的token的变化和报错信息菜鸟教程网_axios入门百科

    一、axios的封装点击此处查看axios官方文档步骤一:安装axios进入vue-clinpm install axios步骤二:新建一个httpConfig文件下,创建两个js文件,一个作为axios拦截器用,一个封装接口步骤三:在serviceAPI.config.js中封装所有的API接口const BASEURL = ‘http://192.16

    2020/03/23
  • 递归算法的理解基础知识教程_递归基础知识教程

    递归:所谓递归,就是既有传递,又有回归,与其说是传递与回归,初学不如理解是一种 “循序递进”与“规律约束”。为什么这样说,因为递归算法相比较于循环在代码结构方面个人认为更加简洁清晰,清晰易懂,递归注重的是一种有序的规律,所以在每个程序开始之前,我们只要能找到一个使程序循序递进的规律;并且在整个过程都在用此规律进行传递,但是递归算法也有很大的缺点,会造成内存

    2020/03/24
  • 你需要知道的CSS 属性选择器!小白基础_选择器菜鸟教程

    属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的,并给出一些如何使用它们的想法。通常将 HTML 属性放在方括号中,称为属性选择器,如下:[href] {color: red;
    }
    这样任何具有href属性的且没

    2020/03/20
  • touchui基础知识入门_高质量移动端UI框架

    touchui基础知识入门 官方网址:https://www.wetouch.net GitHub:https://github.com/uileader/touchui 简介描述…

    2020/03/06