在此之前,子组件到父组件的传递事件我一般还是使用 $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/
深入理解Vue.js响应式原理。Vue教程有关的视频都讲到,我习惯响应式开发,在更早的Angular1时代,我们叫它:数据绑定(Data Binding)。你只需要在Vue实例的 data() 块中定义一些数据,并绑定到HTML
本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站
单向绑定非常简单,就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新,双向绑定就很容易联想到了,在单向绑定的基础,用户更新了View,Model的数据也自动被更新了,这种情况就是双向绑定
mixin是为了让可复用的功能灵活的混入到当前组件中,混合的对象可以包含任意组件选项(生命周期,指令之类等等), mixin翻译过来叫混合,高级的词汇可以叫插件入侵
如果你一直在阅读有关props内容,你会发现我们可能也一直在使用它们(即使没有意识到),但也许你并不完全确定它们是什么。或者如何正确使用它们,并充分利用它们。
webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,包括:单文件组件、优化Vue构建过程、浏览器缓存管理、代码分离
Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。
render函数是渲染一个视图,然后提供给el挂载,如果没有render那页面什么都不会出来,Vue 在调用 render 方法时,会传入一个 createElement 函数作为参数,也就是这里的 h 的实参是 createElement 函数
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。
主要讲Vue三种方式调用组件:v-model或者.sync显式控制组件显示隐藏,通过js代码调用,通过Vue指令调用,在写组件的时候很多写法、灵感来自于element-ui
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!