当前位置: 代码迷 >> 综合 >> Vue2.0进阶组件篇1 教你秒撸(短信倒计时组件)
  详细解决方案

Vue2.0进阶组件篇1 教你秒撸(短信倒计时组件)

热度:91   发布时间:2023-10-22 09:07:23.0

原本我想隔个几天再发文章,刚好今天项目上线,环境有问题,导致只有干等,刚好要为公司打造一套属于公司自己的一系列功能组件,这个使命就交给我了,大家也一直叫我来点干货,说实话我只是一个湿货,肚子里干一点就给你们出点货,那从今天开始不看岛国片系列教程视频,不但自撸,还教你撸…………你懂的!!最强vue组件https://juejin.im/post/58de6807da2f60005fc1a9bb

写之前我只想说如果看到错别字,就别给我点出来了,宝宝受不了鸟了,有些同学还给我特意打出来,心里还是很欣慰的,就像小编说有错别字说是我用心去写的,能看出错别字说明你用心去看的。无论怎么样送上一句谢谢你们!!
为了感谢你们送你们一本人自创IT搞笑文章,互联网六大门派决战光明顶

接下来还是按着我们约定的来
关于组件篇我就直接拿demo再进行细化分析给大家讲一些细节的知识点,我相信会更有意思一点,为什么我要把基础给大家讲的那么详细呢,因为基础打的好组件才写的好
1.本文分享 计算属性

2.代码运行vue-cli 2.1版本

3.组件代码都在components文件夹里

4.主代码逻辑都在 App.vue文件夹里

我什么都不要我只要

使用v-on 绑定自定义事件

讲到这里我先给大家讲四个东西,一个是vm.on,vm.emit,vm.once,vm.off
这四个东西如何用,到底是什么鬼东西,看官文档不是吹牛B对新手来说很难看的懂
1.emit2.on 是监听事件 第一个参数是监听事件名,第二个是一个回调,可接收emit传来的任意参数
3.onceon不同的是只是监听一次只后不再监听,第二个是一个回调,可接收emit传来的任意参数
4.$off 是取消监听 只有一个参数,是取消监听的参数名

直接上demo一目了然

<template><div><button @click='demo'>到五的时候取消监听</button><p>{
    {ziksang1}}</p><button @click='demo2'>只监听一次,传一个参过来</button><p>{
    {ziksang2}}</p></div>
</template>
<script>export default {created () {this.$on('demo',()=>{this.ziksang1++if(this.ziksang1 == 5){this.$off('demo')}})this.$once('demo2',(value)=>{this.ziksang2+=value})},data () {return {ziksang1 : 0,ziksang2 : 0}},methods : {demo () {this.$emit('demo')},demo2 () {this.$emit('demo2',10)}}}
</script>

我在点击两个按钮的时候,同时发出了监听事件,一个是demo1,一个是demo2
但是我在第一个按钮上进行了on+5demo,Once来进行监听,但是有一点你会发我在事件上demo2触发事件的时候带了一个参数过来,让$once去接这个参数,就能很明显示展示了参数如何用

就问你们讲的好不好,我相信此处应该有掌声,api中就是给了一个简单的述语,对新手很难理解

在1.0版本中我们发现一点,我们父子组件进行双向数据绑定是用:async 来进行的,可是这个会影响组件与组之间的混乱问题,不小心篡改组件的数据,那怎么办2.0尤哥用了v-on来让父组件来监听子组件触发的事件来进行数据传递
请看下面这张图

从这张图中很不难发现一点,父组件传递数据给子组件用的是props,那子组件要改变父组件的状态则用emit events来进行触发

那如果是组件形式的我们就不能用$on了,只能在组件上使用v-on:’监听的事件’=’监听到事件后做的事件函数’

组件 myDemo.vue

<template><button @click='a'>按钮</button>
</template>
<script>export default {data () {return {time2 : ''}},props : ['time'],watch : {time (value) {this.time2 = value}},methods :{a () {this.time2 ++this.$emit('a',this.time2)}}}
</script>

App.vue

<template><div><myDemo :time = 'time' @a='a'></myDemo><p>{
    {time}}</p></div>
</template>
<script>
import myDemo from './components/myDemo.vue'export default {components: {myDemo },data () {return {time : 0}},methods : {a (value) {this.time = value}}}
</script>

我们在组件myDemo中当点击按钮的时候会把父组件传过的time参数再返回给父组件显示,每次加一
这里要讲几个知识点
在组件中,我觉得最操蛋的一件事不能直接操作props里的数据,那怎么办,有一个办法,创建一个副本,我们只有watch prors里的time参数,当父组件把数据传递过来的时候,props里的time数据此时就被watch捕捉,然后再赋值给time2,此时我们就可以操作数据time2,然后每个点击按钮+1,再然后通过$emit触发事件,再把time2当作参数传递给父组件
在父组件里我们就可以v-on监听触发的事件,然后再执行方法,在事件回调中拿到子组件传过来的参数进行数据赋值 ,更新视图,虽然有点复杂,好好理解一下就可以了,这种情况我们以后会用到vux就能解决这种复杂的问题,但是既然对于封装组件来说只有这么办

好了知识点就讲这么多,我们开始打开ziksang岛国视频,请老司机们握好方向盘,不要乱踩油门,开始我们的倒计时组件

应用场景
不用想倒计时组件肯定每个完整的项目里都会用到,跟你们讲讲我,我感觉我做的公众号就是一个钓鱼公众号,到处都是注册,可以这么说,你不注册什么都看不了玩不了,有些注册花样还不同,但是始终有一点,永远离不开短信倒计时,费话不多说,如果我手上有一把屠龙刀绝对帮那产品割包皮,来吧我上代码

组件 ZiksangCountDown.vue

<template><div><button>{
     {time | change}}<tton></div> </template><script> let flag = falseexport default {data () {return {time : '获取验证码',}},props : {start : {type : Boolean}},watch : {start (value,oldvalue) {if(value == true){this.countDown()}}},methods: {countDown () {this.time = 60;let time = setInterval(()=>{this.time --if(this.time == 0){this.$emit('countDown')this.time = '获取验证码'flag = trueclearInterval(time)}},100)}},filters : {change (value) {if(!value) return ""if(!isNaN(value)){if(flag == true){return `重新发送${value}S`}return value+'S'}else{return value}}}} </script>

App.vue

<template><div><ziksang-count-down :start='start' @countDown ='start=false' @click.native='sendCode'></ziksang-count-down></div> </template>
<script>
import ZiksangCountDown from './components/ZiksangCountDown.vue'export default {components: {ZiksangCountDown },data () {return {start : false}},methods : {sendCode (value) {//前面发送ajax请求成功之后调用this.start = true开始短信倒计时this.start = true}}}
</script>

我们先从组件开始分析,现在的我已经很困了,又是2点,TMD运维不知道干什么吃的还没上好,但是可能就是天注定,如果在发布之前结束,你们明早一睁眼就能看的到我的文章
先分析 template模板里,很简单,我用change来过滤,在基础篇里我也将过,这种场景比什么computed,watch,模板语法再适合不过了,因为filter里不允许使用实列上的任何东西,所以我只能在最外层进行定义一个flag变量为false,这个作用就判断是否是重从发送,当发送过一次再点击之后,改为true,我们对时间进行不同的过滤,第一次发送直接返回时间+s,第二次发送或更多发送之后返回重新发送时间+s,如果倒计时结束则不是一个数字,则返回获取验证码,
二。如果对倒时间有一个监控点,我用的是父组件传来一个start,此时再结上面那个v-on知识点,我在watch对父组件传来的start进行监听,如果变为true,我就要马上调 用countDown 这个方法来进行倒计时操作。
三。在用countDown这个方法里,我在时间变成0的时候,我对外进行一个事件触发,让父组件去监听,让父组件的start再变false,说明倒计时已经结束,如果再发送则再改变start的值向子组件进行传递,就这么来回来回,重复执行。一个短信倒计时组件就这么大告成功了,其实在本质上还可以再加一些:class的判断如果时间在倒计时的时候给颜色变灰,这个就当是一个小作业,给同学们练练手。

原本想给大家分享日历组件的,但是我想来想去,基础打的好,后面学的才不难,我的创作一开始目的就行清楚,从浅入深。虽然我的图片是从深入浅,什么从深入浅的TM扯淡,只是一种装B的说法。说归说归但是B还是要装起来的