00:00
在上节课我们说了如何使用这个apartments传递参数给组件,来这里我们整理成了一个笔记给大家看一下啊,那在看笔记的同时。我把这个。这个先删掉,因为等会还要复制一下这个项目,讲这节课的一个内容啊。先让他删掉,我们来看个笔记啊,向路由组件传递P参数。首先你得去在这个路由链接里面去携带上我们要传递的这个参数,对吧,接着在注册路由的时候,你要声明要去接收你传递的这个参数啊,传递的这个排参数。携带声明,最后我们在组件里面还要去接收这个参数,接收呢,是啊,从这个purpose这个麦起这个里面去取出来我们需要的这个参数啊,这个就是向组件传递参数。那这节课我们再来学习一个传递参数的方式,诶,我直接复制一下这个标题啊,向组件传递search参数。
01:00
好,那什么是设计参数呢?我给大家写一下,大家就知道啊,同样的,我先把这个折叠,然后复制一下这个组件。把它改成幺零。四七。这里停掉,回到上一级目录10TAB键补全色,然后去安装需要的一个依赖。行,这里现在安装的来看我们的这个代码。看一下。我们注册这个,诶。路由链接的地方啊,在这里去注册的这个。留链接啊,我们继续在这个基础上去写啊。再往这边拉一点。这里我们是向组件传递参数啊,这里去声明接受参数。是不是好,那这个我就先来注释掉。哎,这个也注释掉。我把这个先留一下,然后在下面去写我们这节课要写的一个内容,哎,就是向组件传递,把这个知识点啊传递什么呢。
02:07
Search参数啊。这个改一下。那传递色起参数呢,其实这个都不要了啊,色系参数大家想一想,那什么是色起参数啊,其实就是我们之前在使用。嗯,阿贾克斯的时候,哎,使用的一个这个query的一个参数,以问号的形式去传递这个参数,对吧,那为什么叫色起参数呢,这个我们在后面,哎,这节课的后面给大家说一下。啊,既然说了我们这个其实就是宽参数啊,那我们这里先称为这个设计参数是以问号的形式,也就是说它会以问号ID等于哎等于001,然后按符的形式去传递多个哎title等于哎消息一这种方式去传递这个参数,对吧?消息一好,那我们不把这个ID1给写死,我们还有这个消息一啊,都不写死啊,我们还是和这个一样,从我们迭代的这个对象里面去获取,来把它给替换掉,这个ID001。
03:05
把这个消息也给替换掉啊,也是这个title给替换掉。来这里替换掉后面的这个值啊,注意啊,你替换的是这个值,这个是我们传的这个K,这个你不要给替换掉了啊。啊,因为我们要向啊别的地方去传值,那是要有什么呢?K和Y6对不对,K和Y6,然后多个以and符去连接,然后这个链接后面跟上这个问号啊这里呢,我们称是这个色计参数,但实际上也是我们之前在使用阿贾克斯时候传的这个query参数,对吧。好,那。这个是传递的这个参数。我们说过啊,你这边你传递了,这里面是不是还要你声明接收,你看我们之前去声明接收了,这个part参数怎么去声明呢?那这个色系参数怎么去说明呢?我们在这里继续写。把这个打开啊。
04:02
这里我开始写啊,接收search参数啊,不用声明可以直接传,哎,为什么不用声明,这是因为这个问号的存在对吧?问号后面的都作为这个查询参数啊,作为query参数,作为这个色系参数,我们可以直接传递过来,那这里呢,就什么都不用写。好,那接下来我们再看第三步,因为你要像一个呃组件去传递数据,哎,我们必须得经历这么三步啊,哪三步呢,你去。啊,携带参数,然后声明接收啊,然后去接收参数对不对,那当然我们这个色体参数呢,哎,不用声明了,但是我们要去这个组件里面去接收,对吧?看看我们的这个色体这个参数到底在哪里。来进到这个组件里面。好。改一改啊,那。这个就不要了啊,这个我们就注释掉,我们都留着,把原来的代码都留着,最后好给大家,呃,整体去总结一下,那这里这个注释我们就。啊,复制一下啊复制一下。
05:01
47。诶,传递参数可以在什么什么中获取到,这个我们先空着啊,因为现在还不知道在哪里获取啊,但肯定是在这个purpose里面对吧,所以我们去打印一下这个purpose list啊,Purpose look。来呃,因为这里呢,这个ID我们注释了,所以这里呢,它又用到这个ID,这里会报错的,那我们先先写一个假的一个ID啊,先把这个ID给强制写死001啊,要和上面的匹配,这样的话下面就不会出色。接下来我们主要是看一看这个purpose里面哪里藏着我们传递的设计参数,来把这个项目运行一下呀,Start。来回到浏览器中啊,把这个都清一清,然后这里我把它给从从这里从开始给大家点一下啊。还没有去加载完。啊,还是报了一个错啊,Title也找不着了。啊,我刚才只注意了这个ID,没注意title,再来一个title。
06:04
啊,消息一先写死啊先写死,要不然下面会报错。好,已经有了,嗯,点about点这个接下来我要点了啊,其实点哪个都一样,因为这个消息。是传的是这个色体参数嘛,主要是我们找一找啊,在哪地方长的这个色体参数来展开。你其实你这么一眼看下去,可以在这里去看到了,是吧?啊,你看在这个里面location里面。已经看到了这个色系,这是不是我们传的这个参数ID001抬头是消息一对不对,那如果我点的是二的话。再来看一看是不是?ID等于002 title等于消息二对不对,哎,那这里面就藏着我们的这个设计参数,这也是为什么,哎,我一开始讲的时候啊,说那我们这种问号的形式,明明就是那种query的啊传参形式,那为什么我们要说色计参数,其实就是因为他把这个我们传的这个query的这个数据啊参数给放到了这个色体里面,所以这里面我们一般称为就是嗯,色体穿参。
07:03
啊,接下来说一下这个数据的问题。呃,之前我们使用apartment产,它给我们放在这个麦,放在这个里面,它是一个对象,哎,我们直接可以通过点的形式啊,去使用它的这个属性,但是这里。就比较麻烦了,它是一个字符串对吧。那字符这怎么办?我是我们是不是还要写一些这个啊,处理的一些呃方法把这个ID从这个里面给提取出来,把title从这个里面提取,提取出来是这样的吧啊当然你自己写也可以,但是比较麻烦啊,其实我们可以借助于一个工具,哎,这个工具呢,它可以自动,哎,直接帮我们把这个数据给处理好啊,不是自动,是我们要使用这个工具的一些方法去处理这个啊,传的这个设计的参数啊。那怎么处理呢?我们无非就是说想要把这种哎,字符串的形式给处理成什么样,处理成我们比较熟悉的这种对象的形式啊,什么形式呢?就是这种啊,来写一下AID是什么。A001,然后title头是什么?是我们的这个小写一,我们要把这种字符串的形式最终处理成这个,哎,是不是这样的啊,那当然我说了啊,自己处理也可以,比较麻烦,那我们可以借助一个工具,那借助什么工具呢?我们来看一看啊。
08:12
你既然要借助一个工具,那你肯定得import,对不对,但是现在借助于什么工具我不知道先X啊,那借助于谁呢?From,哎,From,接下来就看我们借助哪个工具啊,借助于一个CHRY好。大家可能疑问啊,你用这个工具你不先下载一下嘛啊,这个是不用下载的react啊,这个脚趾夹已经帮我们内置了这个工具,所以我们直接可以引入去使用就楚吧?啊,那当然这个XX就不太合适了,一般我们会用它的一个缩写FQS。好,这个工具它可以帮我们去处理这个字符串,哎,把它转成对象的形式,那我们先写一写小DEMO去看一看啊。看一下,那先写一个什么呢?我来自己去定义一个,呃,对象啊,比如说ID等于。
09:00
啊001,然后取消啊title。哎,抬头是这个消息一啊。一个MSG吧,好,我自己去定义了这么一个啊。对象,然后我使用这个工具的一个什么方法呢。String粉,然后把这个我们定义的这个对象传进来,哎,它可以干什么,它可以把我们这里这个对象给我们转成字符串的形式,转成什么样的一个形式,就是以这种啊,ID等于。什么什么啊,然后and开头等于什么什么这么一个形式,我们这里已经cons了,我们来控制台看一下啊来。清空啊。这个是我啊之前手写的啊,这个你只有把它给回撤一下再清掉,它才会没有啊。接下来我点一下这个消息一啊,看到这个没有没有输出啊,这里写的有问题。这里直接输出的话,输出不出来,我们要先给到一个变量,哎,然后去输出这个变量,因为它的处理结果给到这个变量之后,我们去输入这个变量就可以了,来这个保存,保存之后再来看一下。
10:13
好,这里可以看到已经出来了,对吧,它是把这个。啊。给我们转成了这个字符串的形式啊,ID等于001 title等于A这样的一个形式,这个其实是给我们把这个中文进行编码的,明白吧啊。把它进行编码了,你如果是一个数字啊,或者说一个英文的话,就可以直接输出来,那为什么会把这个中文进行编码。来看一下啊中文编码,那为什么会把这个中文进行编码,那其实这种形式这是什么,这个其实就是我们常说的啊这个URL。En de啊这种编码形式。对吧,他会把这个中文进行一个编码。啊,这是它的第一个方法,可以把这个对象啊给我们去转成这种形式。
11:00
啊,接着呢,我们再来看看它的第二个方法啊,那这个我们就先先注释掉啊。来。这个时候我定义一个什么,我定义一个啊,这样的一个字符串,Str等于这样的一个字符串。因为既然它能把对象给转成这种字符串的这种形式,那么它就应该有对应的方法去把这种字符串的形式转成对象,对不对?好,这里抬头我随便写成。啊,你好。然后ID写个002。接着使用这个方法啊,把它给转换一下来使用这个工具,当然不是这个方法啊,那它是什么方法呢?有一个pass方法。P。来接着数一下这个结果,2.6个。啊,不是这个message啊,是str,我们要把这个字符串通过它的pass方法转成这个对象,我们来看看这个啊。看一下是不是转成了这个对象对不对。好,那既然可以这样的话,我们再来继续看看我们的色参数是不是在这个里面,哎,Location search对不对,我们是不是可以取出来这个啊,这个轮回信中的这个search,然后使用这个方法进行把它给转化成对象是不是可以的?好,那这些我们就先删掉了啊,最后会给大家就是放到这个笔记里面啊,没有事啊,那这里我们先。
12:20
可以在哪里获取到,在这个location。哎,里面的什么呢。也是purpose啊,它只不过是purpose的这个啊,Location中啊,然后这里上面给大家补一下吧,它是这个也是purpose,只不过是purpose的这个麦麦种啊。它的这个search中。哎,那上面这个也补一下啊,是它的P中,我们因为这个下面既然这写了上面就补全嘛,是不是可以在这里面获取到啊,设计传递的参数。好,摄体传递的参数可以在这个里面获取到啊,但它是个字符串,我们是不是可以用QS提供的一个工具进行转换啊,来,我来定一个变量,还是用这个啊,Rerout吧。
13:03
等于什么呢?嗯,把它改成first吧。等于哎这个q s permit这个工具要转换谁转换this.purpose里面的,哎,Location里面的这个色对吧,因为这个是我们拿到了这个字符串的一个形式。啊,经过它的一个转换,哎,是不是就转换成了对象,接着我们来打印一下这个对象啊。来六个啊,其他的打印我已经关掉了啊,我们来看一看这个设计。的输出啊,在这里呢,看到了吧,啊,我清空一下来重新点一个一,这个就是我们输出的这个色略参数对不对?好。嗯,但是有一个问题大家应该看到了,这个问号给我们带着呢,因为我们这个设计传的时候是带了这么一个问号的,对不对?好,所以这里他把问号我们带着呢,那其实呃有很多办法去处理它,那我们只要把第一个问号给它,嗯,干掉就可以了,对吧?那我们在这里把第一个问号给它干掉之后再去转化不就没问题了吗?我们使用一个方法叫这个啊SLS啊,第一从第一个开始截取。
14:09
那这时候再来看是不是就没有了。啊,那处理成对象之后。处理成对象之后,下面需要的这个ID和title啊。ID开头是不是就可以从这个色起,这个处理后的这个结构里面去进行一个啊结构啊,把它们给。结构出来对不对。好,那这样的一个,呃,传参,我们来看看这个效果。嗯,直接刷新过了已经啊。来看一下啊。点消息一消息一的内容,消息二消息二的内容,三三的内容是吧?啊,那这个就是我们使用这种色系的形式进行传参。啊,注意点啊,色计传餐的话呢,它是在这个location的这个啊,色里面可以接收到,哎,所以我们也称为色计传餐,但它明明其实你看起来是很像这个啊,其实就是QUERY33对不对好。
15:01
然后你接收到之后,注意它是一个字符串,我们要借助于这个工具啊,这个工具。借助于这个工具的这个pass方法去把这个字符上去转成对象,哎,当然它转的时候呢,因为我们这个设计中你获取到的这个这个第一个参数,它还带一个问号,所以我们把这个问号给啊过滤掉啊,接下来哎,转成对象之后,我们就可以从对象里面去获取这个数据,后面的逻辑就都一样了啊,这个就是设计传递参数。好,这小节先说到这里。
我来说两句