00:01
哈喽,各位小伙伴们,那咱们呢,接着继续。接下来啊,咱们呢,要讲一下的属性修饰符,Think。Sing这个单词的全称呢,叫ness,是同步的意思。它呢也是组建通信方式一种,它也可以实现父子数据的同步。其实它的作用啊,和咱们前面所讲的V-model其实差不多。那咱们呢,接下来呢,去看一下呢,当前的这个案例,咱们呢,去讲一下呢,这个属性修饰符。那咱们呢,去找一下相应的组件,就是这个叫做think test。那咱们呢,先看一下它的一个结构。那首先说啊,在这儿小明的爸爸现在有问号,问号圆,那咱们可以看一下是不是就是这的结构。对吧,那以及还有两个HR标题啊,一个是不使用think修饰符。
01:05
另外一个呢,是使用think修饰符。对吧,这是没有问题。那咱们先看一下子在这里。他标记了一个叫做小明的爸爸,现在有问号问号圆,那其实这个问号问号,那咱们得改成真实的数字。那咱们呢,可以来一个详细的一个,呃,数据对的。那咱们呢,先让小明的爸爸你得有点钱呢,对吧?妈,咱们呢,先给他来这个1万块钱。那这块呢,你就得变成动态的了。对吧,胡子那插入谁是不是money。那咱们可以看一下子,诶刷新看一下。比如说小明的爸爸现在有1万元。对吧,那咱们先讲一下子不使用think修饰符啊,那咱们先看要做什么。
02:01
那首先说啊,在当前的这个父组件当中,咱们引入了两个子组件,一个叫child,一个叫CHILD2。除此之外呢,咱们呢,也注册了这两个子组件,那咱们使用一下子在这儿啊,咱们先使用第一个吧。Child。对吧,这个是C是大写的。那咱们呢,先去看一眼结构。刷新。那这个呢,其实啊,这个灰了吧唧这一部分那就是子组建。他这里面呢,有一句话叫小明每次花100块钱。那爸爸还剩啊多少钱?什么意思呢?比如说现在老师一点击只组建这个花钱按钮。那小明有点子,组间会花掉父亲的100块钱。那点两下,那不就花200。对吧,那咱们呢,把这个需求给他做了,那首先说你先看一个地儿子组件这里,那他这是不是也也在显示爸爸还剩多少钱。
03:09
那就是说,父亲需要把这1万块钱是不是传给子组件?那这里面咱们需要用到shopper对吧。那咱们呢,把父亲的钱给子组件传一下子,那就是谁呀,Money money为什么是为咱们的money?那你父亲把钱给了子组件,那子组件你是不是得接收啊,对吧,那咱们就用prop接收一下。那这个接受的谁,接受的是不是money?那这块是不是就得替换成父亲有多少钱,那不就是money吗?对吧,那咱们呢,先看一下结构。对吧,小明的爸爸现在有1万块钱,那小明每次花100块钱一点,这个按钮是不是花100,那爸爸还剩多少,你是得算。
04:00
对吧,那其实说白了,当你一点击花钱这个按钮。你得知道是不是花掉了小明,是不是花掉爸爸的1万块钱当中的100块钱。对不,那爸爸是不是还剩呃,99990块钱。那你再点。你再点再点是不是都是在1万块钱的基础上,每一次是不是减减到100块钱啊。对吧?那也就是说,你的儿子是不是得告诉父亲,我花完你钱之后,你还剩多少?那其实这块咱们完全可以通过呃,自定义事件完成。比如说回到父组件这。那咱呢,可以给他绑定一个自定义事件,当老师一写爱的福的时候,你得知道老师要做一件什么事。你看一写II是啥?是不是we-on的简写?是不是要绑定自定义事件?对吧,比如咱起个名叫update更新。冒号。更新前嘛。
05:00
对不对,那只不过这个自定义事件的名称跟咱们以前所写的有点不一样。以前咱们经常写的是啥,是不是写一个名字就行了,At update at,什么什么什么,呃,Click对吧,这回老师起个名字叫at。Update,冒号加上money money是什么?是不是就是你副组件给自这传这个prop的名字?对不,那当然,那这里面你可以写相应的回调,但是咱们的业务很简单。你就是给父组件这个money重新赋个值就行了,为什么为子组件自定义事件传回来这个数据。对不?哎,那咱们回到子组件这回到这儿。那也就是说小明每次花100块钱,什么时候花,是不是点击这个按钮的时候。那咱们可以给他绑定个单击事件艾click。那你要干什么呀?你是不是要触发自定义事件叫update money咱就写呗,到了谁?
06:01
那第一个参数是不是你触发自定义事件的名字叫啥?是不是叫up冒号money?那第二个参数是啥?第二个参数是不是子组件,需要把父亲还剩多少钱,是不是要告诉父亲?对吧,那其实就是是不是就是money减去多少,减去100。对不对,那咱们可以看一下现在这个效果走,你看是不是这个套路。比如说父亲一共有1万块钱,小明每次点击按钮会花掉100,你看这不就是父子数据经同步吗?利用的套路其实跟谁很像?跟咱们的VGA猫都很像。这不就是通过shop和自定义事件实现了父子组件的数据的同步吗?对吧?啊,这是咱们并没有使用think修饰符。那这块呢,老师呢,给你们做一下笔记,那首先说money,嗯,冒号money money是什么?是父组件给子组件。
07:12
传递的。还有一个叫做at up date,冒号money,这是啥?这是给子组件,给子组件绑定的自定义。的事件。只不过哎,只不过名字叫做啥呀,叫做up冒号money。对吧,哎。而且现在咱们的这种写法,就是目前。现在的这种操作啊,其实跟谁很像,其实和微港model很像。很像。很相似,干什么?是不是可以实现父子组件数据的同步?
08:01
对不,那这是咱们没有使用think修饰符,那咱们再看一下子,如果使用think修饰符。那咱们呢,还有一个子组件叫CHILD2,其实你看CHILD2和第一个子组件child结构是一模一样。对吧,那你看老师做一件事什么事,就这你可以简写。走。这块呢,你就可以用谁进行代替呢,咱当然得用CHILD2子组件啊,那这块咱给它换成谁换成二。啊,换成二。这块呢,咱就可以不用写这么多了。你只需要在money的后面加上一个叫做think修饰符就行了。但是你要注意这个think修饰符啊,也就是说这块整体的这个这个代表的含义是什么,咱们说一下。就是这个冒号。Money money第二。SYNC,它代表的含义,第一个,第一。
09:00
第一个是什么呢?就是父组件给子组件传递了一个proper money。这是第一个,第二个含义,第二。第二个含义就是什么呢?给当前子组间。绑定了一个自定义事件。而且。事件的名称即为什么即为update冒号。Mon啥呀,EY?虽然你得知道加上think修饰符,属性修饰符,它的作用是啥,对吧,这两个作用。那咱们可以回到哪?可以回到子组件这二,那咱们也是一样接收父亲所给的prop money。对不,那以及这块也给他换成谁,是不是父亲还有多少钱,那咱也写上money。那也是一样,当你一点击花钱这个按钮的时候,艾特,可你要干什么?是不是要触发自定义事件?
10:02
哪个自定义实验叫update冒号money?对吧,传递的参数导是不是money减去100。对吧,在父亲钱的基础上减去100嘛,那你看实现的效果是一样的。对不?对吧,所以说呢,老师呢,在这呢,也做一下笔记,第三个。叫做属性。修饰符,哎,SYNC它也是组件。通信的方式的一种。它可以干什么呢?可以实现父子组件数据的同步。对,不,但是咱刚刚写的这行代码,你得知道。它是什么作用?money.sync这代表什么?哎,斜下。代表。副组件。
11:00
给子组件传递了一个proper叫啥叫money?第二件事儿就是给。当前的子组件。绑定了一个自定义事件,但是一定要注意这个事件的名字叫啥,叫update。冒号加上你当前这个属性的名字,Money。所以说一定要注意,Think也属于组件通信方式的一种,可以实现父子组件数据的同步。
我来说两句