00:00
好嘞,各位,那在这一小节呢,我们来关注一下这个路由组件detail是如何读取出来别人传递给他的参数的?舒老师,这有什么可关注的呢?你看吧,老师,打开这个detail,我看的是什么参数不就得了吗?如果是PAR参数,我就点PAR,如果是query参数呢?那我就点query不就得了吗?这没有什么可关注的吧?是这样,各位,我目前只传了两个参数,一个是ID,一个是title,所以说你觉得这么写还可以,但你说如果我传递的是六个呢,消息不仅仅有编号、标题,还有消息的作者、发布时间等等一系列的信息,你怎么呈现呀?你是不是得把这些东西不是不是写六遍,那你觉得同学你一遍一遍的写,这合理吗?就在这个模板里面明晃晃的写这么多重复的东西,不太合适吧,哎,所以说我们得把这个问题啊给它解决。那你说怎么办呀?我想让模板里的写法尽可能简单,不要一遍一遍的写这些,大家可能会想到这个东西谁呀,Comp的计算属性是不?各位我在这写个计算属性idi,它的值呢,我直接来个return,把这一堆东西啊给它带走,这直接写this点是不是就可以了啊?那把这个呢复制一份,在这来一个逗号,补上一个,这叫什么呢?叫title啊,在这呢,给它复制过来放在这儿,那这呢就更简单了,直接写title就可以了,当然上边呢,就直接写ID呗,说老师这不就得了吗?
01:24
啊,来看一下效果呗,切出去切回来走走走能不能行行,但是同学我告诉你,你没有把问题解决,你反而把这个问题弄得更复杂了。同学,如果我有六个,那你说怎么办?你是不是得写六个计算属性啊,我的天呀,各位之前还行,只是把这一块重复了,结果现在呢,好家伙,你又多了这么多的this是不?哎,其实你这么写并没有把问题解决,说老师那怎么办呀,我怎么能让他读取参数的时候读的更简单一点呢?不写这么多重复的东西呢?诶,那你就得借助路由里边的一个全新的配置项了,它的名字呢,叫做pros,诶,这词你熟悉吧,各位往上看,我们曾经讲过组件的pro,组件的prop配是干嘛的呀?打开student是用于接收外部传进来的东西,对不对?我是不是收到了name age sex是不,各位,那我得怎么给他传呢啊,既然它是student组件,那你肯定。
02:24
写过这段代码,Student完了啊,等于一个什么什么东西,你肯定也得写过空格,Age等于什么什么,后边我就不写了,然后呢,写完了你肯定写过这段东西,你只有这么写这边才能,诶这么声明接收对不?当然它有三种声明接收的方式啊,这两个呢是做限制是不?诶这是组件的prop配置,用于接收外部传给组件的东西啊,那我们接下来给大家讲的呢,不是组件的prop配置,而是路由的prop配置,所以说你打开路由的配置文件,各位谁接收东西你就上谁那写这配置去,谁接收东西,这么多的路由组件谁接受东西,当然是detail啊,在这呢,写一个全新的配置,像各位叫做props。
03:10
啊,然后值呢,一共有三种写法,先给大家讲最简单的一个啊,就是直接写一个对象,好在上边呢,我写一个注释啊,各位叫做prop的第一种写法叫做职为对象,那写一个对象他能怎么着呢?随便写点东西啊,比如说呢,我想让A呀,是一,然后我想让B呢,是这么一个东西,叫做hello OK,写完了吧,那你得知道这个对象它到哪去了呀,把后半句话给大家补上,叫做该对象中的所有key value都会以pros的形式传给你,说传给谁写在哪个里面就传给谁,传给得组建啊再把这句话读一遍。
04:03
啊,该对象中所有的KY6就是这个a e b hello,哎,都以pros形式传给谁传给detail组件以pros形式传,那你说data组件是不就得以props的形式接收啊?所以说这个时候你默默的回到组件里面写这么一个配置项,咱之前学过,刚说完是不是pros啊?啊,那里边声明接收谁呢?A还有谁啊,B这么写肯定报错,不得是字符串吗?写个A,那在这儿呢,写一个B,写完了吧,那看看能不能呈现出来呗。啊在这呢,我就直接写一个Li,写一个A冒号就代表A的值,然后差值与法在这读出来,读谁呢?读A,那同理,这块写的是B,那这块呢,是BOK,回头看一下效果,啊,各位,效果已经出来了,那一我是不是读出来了?那hello,我是不是读出来了?诶,这就是props的一个对象写法,但是这种写法吧,同学我们用的少,为什么呢?因为传递的是死数据,什么叫死数据呢?来,回头你点一下各位,我无论点消。
05:03
第123,你说这A呀,这B呀,是不都是一和hello,为什么呀?因为所有的组件在匹配的时候都走这套规则,一走这套规则就传递这些东西,这不都是写死的吗?哎,所以说这种写法同学用的非常少,但是呢,你也得知道好把这块呢注掉。接下来给大家讲pro的第二种写法,一点一点同学你就发现它能精简这块的代码,慢慢来啊,走着第二种写法值呢,不是对象了,那那直为布尔值,哎,我写一个,比如说prop冒号是这么写的,含义是什么呢?来各位后半句话给你补上,我边写你边理解啊,若不而直为真为真怎么着呢,就会把该路由组件收到的所有PAR参数,然后以。
06:03
Jobs的形式传给谁呢?同样是得太有组见,哎,来,我把目录呢收一下,注释有点长了,读一下各位啊,直为不尔值,若布尔值为帧,是否为帧啊,就会把该路由组件收到的所有promise参数以pro的形式传给谁给组件?哎,那好像就意味着我这收到的这个参数IDPAR参数title都会以pro的形式传给谁detail哎,那你说是不就意味着在这儿咋的?来各位接收的不再是A和B了,而是谁ID还有谁title是吧?各位,那也就意味着计算属性我不用写了,整个这些都可以不要了,但是我先不删啊,那这A和B呢,A和B肯定没了呗,是不,各位我这都注掉了,说老师他俩能不能同时写呢?你,哎,你觉得呢,各位。
07:00
这是一个对象,它叫props,它叫props,你说能一起写吗?不能,同学这个只有三种写法,三选一,是不,哎,你这么写,同学,那就注定你这会咋的不能接受到这个A和B了,刚才也只是测试一下,但是同学你能接收到谁啊?对我们有用的ID和title,同学我问一下,你这样写多爽啊,你把这些东西都给它删掉,你看我没用写任何刀符wrote,点什么PAR,我直接就拿到这东西了,说老师你吹吧,这玩意儿不能用吧,嘿,能点出去点回来说老师报错,那是刚才写的时候他没反应过来,刷新一波就没了啊,走走走咋样?各位方便不啊,你看不用写什么Dollar for wrote,我就弱弱的在这写了一个pro,是不是就可以了?哎,说老师好啊,这种写法真香啊,哎,但是同学他也不那么尽善尽美,为啥说呢?你看这儿啊,你看点关键性的东西,把所有接收到的P参数,我只字未提这个人,嗯,就是query参数,哎呀,说老师可是呢,这query怎么办呀?来咱试试啊各位,那如果我想接收query,我问各位,这是不是就不用占位了?
08:04
那你在这message组件里面,你是不是得给人家传那个query啊啊,那也就是说呢,在这儿各位来把这个东西改一下,别叫promise了QRY对不对?哎,同学,东西啊,改来改去的,大家别乱啊,我说说我改啥了啊,目前我改了这个位置,也就是说messageage在给这个detail传东西的时候,用的不再是P参数,而是query参数,那我也特别给力的,在这儿不用声明接收对不啊,我在这儿呢,我确实调成戳了,我想带着你验证,它不会去理会这个query参数的,人家的确会把promise参数以pro的形式传过去,但是人家不会理会这个query参数的,OK,嗯,那回到这个detail组件里,同学说,老师,那我收着呗,我在这硬收硬收你也收不见,各位不信你瞧啊,点击home找到这个走走,啥也收不见是不?各位啊说老师那我得怎么办呀,回来嘛,既然收不见,那就自己写嘛,把这一堆东西给它解开嘛,那这变成QRY啊,那这呢。
09:04
也变成query呗,那在这儿呢,计算属性这不就能用了吗?啊来回到这儿,你看马上有效果二一是不行啊说老师那你这不行,你这局限呢,你这写这玩意儿,你看pro处你只能解决pro,你这个per参数,你别的你解决不了啊老师你看到宽RY不又废了吗?这一堆东西不又写这么多遍吗?哎,所以说吧,各位在这我们还有pros的第三种写法,诶第三种写法呢,哎,就略显高端了,来写注式叫做第三种写法,直尾函数,哎,我就一说函数同学,你就应该觉得他能干的事挺多是不?哎,能接受参数处理逻辑,有返回值是不是?嗯,好,来直接写啊各位pro值为什么呢?哎,一个函数,但是你不用写的这么复杂,对吧?各位prop冒号function简写形式嘛,是不?各位啊,说老师这里边呢,那我跟你讲,就靠返回值了,就靠返回值了,来written return written return这么一个东西啊,ID多少呢,666,哎,再给他返回一个。
10:04
Title title什么呢?叫你好啊,哎,同学写的是函数吧啊,函数有返回值吧啊,那这个返回值里面啊,每一组Y6同学返回值必须是一个对象啊,你返回别的不行啊,这个每一组KY6同样会以prop形式传给detail来,我们先验证啊同学,我这是写死的数据,ID666TITLE,你好啊,那回到我这个里面,各位怎么办?计算属性。不要再写了这个,打开ID抬头来看效果啊,各位切出去切回来走走走,你看666你好啊。没说错吧,各位确实是以这种形式写的嘛,那我确实是以pros的形式传过去的嘛,啊,那接下来我们得解决这么一个问题,同学,你不能说点击哪个消息,它都是666你好啊呀,也就意味着咋的在这儿啊,你不能写死啊,说老师我觉得你这么写呀,你去边去吧,你还不如这么写了,你直接写个对象多简单呀,可是呢,人家说的确实是各位,我要这么写,我就直接把这个绿色的对象替换掉,这个黄色的不就得了吗?哎,同学,我跟你讲,人家设计成函数啊,是有原因的。同学我问你啊,你说你到哪儿才能拿到这个ID吧,你告诉我你去哪儿能拿到这个ID,你肯定得找这个人,Dollar福root,你说对不?各位。
11:25
啊,ro.quary.id是不是就可以了?哎,同学,你是不是特别特别想在这个位置得到一个人,就是Dollar符wrote好,你特别想得到,诶,人家就非常给力把这东西给你了,直接接收一下就可以了啊同学,这是一个回调函数啊,什么叫回调函数?各位,我们定义的我们不调用,但是最终它执行了,这不就是回调函数吗?啊,你只要写一个函数在这view roer会帮你调的,并且调的时候特别给力,把这东西给你传进来了,那你知道接下来应该怎么做了,Dollar了点谁呢?ID?啊,点什么呢?query.id是吧?哎,那在这呢,还得把这一堆东西啊给它复制,嗯,这怎么换呢?Title是吧?各位OK,理解理解啊,说老师这就行了,是的,来,回头看一下效果啊,回到这边刷新走走走是不可以,哎,那在这儿呢,可能有同学说了,老师你这问题还没有解决,你这不还写这个了吗?什么Dollar road quality ID啊啊,确实是,但是我把这个逻辑挪到哪了?哎,挪到这个路由配置里面了,也就是说程序员在编码的时候,在组件里面写东西的时候怎么办能清晰一点了,至少我打开这组件,各位我没有见到特别复杂的计算属性是不?哎,我也没有写什么过多的逻辑,直接接收一下ID和title是不是就可以了啊,这套逻辑呢,往后挪是不?如果你想写的再好一点,你可以这样写啊,接收参数的时候咋的?哎,就给它结构赋值,拿到谁呢query,然后在这呢就能更简单点了,query.id那这呢就是query.title是不是可以哎回头看一下效果啊,走走走是不是也可用啊啊。
12:59
你还可以写的再好一点,各位在这儿呢,用结构赋值的连续写法,在这儿再来一个冒号,再写一个啊,在这写一个ID啊,然后在这呢再写一个逗号,再写一个title,那意思就是解构赋值拿出query,在query里边再解构赋值,拿出谁呢ID和title,那也就意味着这就更简单了,直接写ID,那这儿呢,直接写开头,不知道各位知不知道结构赋值的连续写法,结构赋值大家好像都知道,但是连续结构赋值不知道各位练没练习过,OK,在这儿也是可以的,回到这儿走走走是不是也行,但这种方式呢,同学语义化不明确,哎,所以说不是十分推荐大家使用,哪怕你这么写也行啊,你把这呢拿到query,然后在query点这也可以啊,是吧,那我还原成最正常的写法啊,各位还是在这呢写一个Dollar for RO,把这些东西呢敲个回车给大家体现出来,所以说这个就是路由的props配置同学,目的只有一个,让路由组件在这接收参数的时候能够更加的畅快。不写这么多繁琐而又。
13:59
重复的东西对吧,各位来笔记呢,给大家整理好了,我们读一遍路由的proage,让组件啊什么组件路由组件更加方便的收到参数,第一种写法啊是对象,第二种写法布尔值,第三种写法值为函数同学,这种写法是最强大的是不是各位就比如说我想把刚才那A和B呀也给它返回出去,那你是不是可以在这加呀,在这写1A值是一是是可以写1B呀值呢,好对不?各位哎,一个都不丢,OK,那这一小节呢,我们停。
我来说两句