上节课我们最终选定了第二种方案进行父传子 数据。
先来个人信息表的数据传输:
首先打开我们的Home.vue,给个人信息表的数据弄出来变成一个变量。
然后找到子组件Detail的dom层使用行,并加上自定义属性。
好了,然后我们去Detail.vue组件内去接收这个自定义属性。
然后就是在我们的那些输入框中直接展示即可。
然后我们来测试一下:
可以看到功能已经成功了~
注意,我在开发的过程中,写错了几个单词。请大家不要抄错了。
man 被我写成了 men
address 被我写成了 adress
want 被我写成了 wangt
大家引以为戒,千万不要手滑写错单词,排查很难的。
好了,搞定了这个基础信息,下面就是择偶信息了。直接照葫芦画瓢!
正好大家再复习一遍!
第一步,在父组件中接口返回值中 弄好这个变量:
第二步,在子组件的dom层引用标签加入新的属性:
第三步,打开子组件,去接收:
第四步:在子组件中使用这个接收的变量
测试结果:ok
这里要说明一下,虽然择偶要求中都有最低 最高这种描述。
但是实际上,差一点也不是不行。
比如要求身高最低160,但是159也不会就完全被砍掉。只是会降低最终的匹配分数而已。
而161 这种则会加分,但考虑到正常人性选择,所以如果身高达到165以上,那么就要开始扣分,毕竟和人家心中目标差距太大了。
所以最终的算法肯定是要不断优化的,尽请关注。