fang_my的博客

在前端项目中牵扯的最多的莫过于组件之间的传值了，除了最最常用的。

总感觉这种方案不是特别优雅🤔，如果有大神可以在评论区指导另一种写作方案，我们共同讨论不失为一种乐趣～

目前的代码只是一个很粗糙的实现，更加具体实用的功能还需读者根据自己项目的需求自行完成。下面是文件的代码。读者可根据需要自行查阅。import {} //dialog 消失的方法 }

这三个属性所对应的和都是同样的道理，在这里就不重复赘述了，希望读者可以自己举一反三自行推导这三个属性代表什么意思。从学习这几个属性的过程中才真正体会到：“看一千遍文档，不如自己动手实践一遍”的道理。还希望大家也可以跟着自己敲一敲，真的不难。与君共勉才是我写这篇文章的初衷～

最近在实现一个window的全套UI，代码开源到了github。我会在之后一直更新类似的内容，包括拖拽的实现。赠人玫瑰，手有余香🌹。

闭包不另开一篇文章讲解是讲不完的，并且阮一峰阮大的闭包讲解的已经很好了，我就不献丑了） 对于现在的场景简单来说，你可以这样理解。那么我们的 防抖 函数在这里的作用其实就是帮你把这个函数包装一下的意思，它并不会直接影响这个函数的内部逻辑，就像你的礼物包装一层包装纸🎁后，它本身是没有发生任何变化的。我仅仅只是想最后搜索 hanzhenfang 这几个关键词，但是我在输入每一个字符的时候，都会去后端请求一次，数据量小还好，如果数据量过大的话，由于前几次的请求都是毫无意义的，势必会造成性能和资源上的浪费。

之所以不喜欢使用真代码去写文章而大量使用截图的原因是：我自己在搜索到自己想要的文章后，也会喜欢直接看有没有最后的成品代码，然后直接复制就拿过去用了，而往往忽略了自己动手去实现一遍才是真正理解了的过程。所以我写代码的时候，尽量不写特别复杂的逻辑，而写一些很简单的几行代码去实现某一个功能。是因为我希望你们真正带入自己的思考，和一步步体会这个实现过程，从而举一反三。如果你认真看了该文章，你也许会明白现在很多组件库的底层实现原理其实就是这样的，比如全局弹出的dialog，modal框等等。

emit学习知识不要总觉得自己会了，或许你从一开始理解的就是错的，一定要保持一颗虚心的态度。真正的大师永远怀着一颗学徒的心。

v-model双向绑定其实就是一个看作传递props和设定自定义事件的语法糖。没有什么很特别的地方。但是如果熟练使用起来的话，在开发通用组件的时候会更近得心应手。

前两天在项目中很多场景下都需要用到一个toast弹窗，项目使用的是ionic+tialwind_Css，ionic也有自带的toast弹窗，虽然大部分场景下直接调用它提供的api已经能满足需求了，但是它弹窗的高度，（也就是弹窗出现的位置）并不是高度自定义的，并且弹窗的z-index在我们项目中会和一些组件冲突，但是这个之前一直没有办法解决，所以干脆自己手写了一个使用方法高度类似ionic_Toast的组件。但是处于复用性考虑，我们的toast的宽度是不能设置固定宽度的，具体的宽度是由当时文字的大小决定的。

今天项目需求需要实现一个类似于微信右滑显示额外选项的功能，记录一下实现思路。

这周在项目中需要实现一个类似于github顶部标题的效果，如下图 主要效果为：当用户点击的时候，底部出现黑色的细线，并且当前项目的字体变粗。感觉这种场景很多，特来记录一下实现过程。接下来我会一步步讲解去实现它。一.基础样式和设计思路我们稍微调整一下布局(这里我使用的是tailwind.css)，本篇主要内容不是介绍css的，所以一些样式的知识点需要读者自己去查阅。这里我的设计思路是这样的，假设当前我的页面有两个选项卡，当用户点击某一选项卡的时候，下面的字会移动到相应的位置，且当前元素的字体会变大

由于官方文档写的太过抽象，真的特别不好理解，所以我来总结一下如何去更简单地理解路由跳转时的动画。首先看一下官方对于这个概念的解释。在刚开始学习的时候，看到黄色框框里内容直接傻眼，从未见过这个指令。不知道这个地方到底是固定写法还是让我们写自己的组件？1.在这里准备两个文件来演示这个指令的作用。2.结构也很简单就是一个按钮组件里并没有自己的组件，而是使用了这个标签来显示出这个组件。3.也是可以正常传递的4.这样这个组件自身就相当于这个组件，你可能会好奇，这有什么用呢？5.如果我们像下面这样写，我再引入一个组件，

对React有了解的小伙伴一定对 这个属性不陌生。其实Vue里的和它的概念是差不多的。我喜欢了解一个知识点的时候，先去查阅它的英文意思，这样真的可以帮助我们深刻的理解这个方法的原意。英语真的是非常非常重要的，但是这东西是一个细水长流慢慢积累的过程，不可能狂补几天就能掌握的。所以我建议可以买一个本本每天记录一下自己遇到的陌生单词。因为到后面会越发感觉到英文文档的重要性，还有就是些第三方库是没有中文文档的。正文从名字我们就可以大致了解，这个东西大概是用来往标签里查某些数据用的。1.准备两个简单的组件构建一个页面

由于之前写的项目都是基于react来开发和思考的，转到vue中从来未接触过这个概念，官方的文档写的也不是特别清楚，（也或许是我的思想还尚未从react的编程理念中转出来）查阅了很多作者关于的解释，但从他们的回答中也并不能理解的特别透彻。好在这几天通过公司项目的练手，自己又查阅了一些视频，终于明白了这个方法的基本逻辑。如果你是react转vue，那么本文将对你有很大的帮助；如果你是vue的初学者，也不要害怕，本文尽可能使用“说人话”的角度去解释。阅读本文的前提条件，你需要对组件通讯，靠来实现这个概念有较好的理

之前只是单纯的会用，因为vue关于父子组件通讯差别有一点点大。1.在父组件内传递变量的时候，需要加冒号，否则你就只是单纯的传递了一个字符串而已。2.在子组件里不需要引入就可调用该函数去接收父组件传来的属性。我个人在这里给自己提醒⏰，可能我太迷糊了。这里需要注意！！这是API是一个函数，它的返回值就是父亲传来的属性。3.刚开始让我感到奇怪的是，我好像不用变量去接收，在里也能正常使用。那我还用变量接收干啥呢？这个API的返回值有毛线用啊？也不用像React那样变量前面都得加一个才可以访问，也没有结构去拿。这么方

今天在项目中看到了用这个方法封装的检测数据类型的工具。但是浏览器搜索相关原理的好回答凤毛麟角，故而想记录一下，万一可以帮助到更多的新手呢？我的文章都是非常通俗易懂的，因为我写文章的时候，都是根据一个前提，假如我是刚开始学习js的新手，别人如果这样讲解这个知识点，那么我也能听懂。我不喜欢那种用专业术语去解释一个知识点凸显自己水平高超的文章，所以我通常采用费曼学习法的方式去记录这些知识点。喜欢的话可以看看我其它文章，对新人极度友好的哟～😊1.我相信大多数人对这个方法有一个误区，包括我，在刚开始学JS的时候，容.

由于工作需要，以后可能会敲vue代码了，所以今天开始会零散的记录一下自己学Vue3.0的一些案例。就从经典的TodoList案例开始吧～也算补上之前react的todolist案例的坑吧🎁简单的在草稿纸上写出页面的整体设计思路为3层div包裹，希望刚开始学习的时候，一定要自己去实际动手去画出大概的效果图。再简单不过的页面设计了。一.在vue的template标签中编写html文件根据上面的草图来写出简单的结构，非常简单的代码。三个来完成草稿的大概实现。设计静态页面为下图所示。二.最首先的功能就是，如何.