使用Props进行数据传递

1.如何调用其他页面的数据

1.1创建

首先创建一个components包

出现《新建组件》选项时，代表创建包成功，且名字正确

1.2 如何调用

在需要调用的页面，直接使用页面名的组件

此时，网页中就能看到调用的页面的数据了

2.如何传递数据

2.1 值传递

使用一个defineProps方法，并将username放入需要展示的地方

在需要调用的页面中，直接写入与之相对应的属性（username）

就可以将值传递给被调用的页面

此时网页中就返回出了相对应的几个名称

但是此时，只对名字进行了操作，图片仍然是固定的值

注意：要在src前面加上《v-bind》或者《：》

只需要对它进行与名称相同的操作即可

这样就可以将图片传过来了

3. 如何将传递的值进行其他操作

3.1控制台打印

此时我们直接对username进行打印，会发生什么？

显示未找到这个变量

因为他现在是处于props对象中的，所以需要使用props调用

这样就有了

3.2 更改传递值

如果想要更换传递的值，那么就需要使用到computed的方法

并且新创建一个变量，才可更改

此时还是无变化，因为在上面的赋值没有将username改为myname

现在就可以看到，数据已经改变

4. Prop设置默认值

4.1默认值如何设置

在第一个页面中，将第一条的username 和第二条的avatar 属性删除，这样就会变为空值

在页面中也确实可以发现，这两个为空的值都消失了

那么如何设置一个默认值呢？

这边我们将代码优化，改为这样的格式，此时username和avatar都有两个属性

一个是type(设置类型) 一个是Default(设置默认值) 这样就可以实现即使属性没有值也可以有数据

这样就可以看到，在页面中带上了默认值

5.defineProps接收对象

5.1直接接收一个对象

在这边直接定义一个对象userinfo，在上面调用UserInfo时放一个属性obj去获取他

并且需要使用v-bind方法

那么在这边直接使用defineProps获取这个对象，在上面调用对象的属性就可以实现了

这样也是可以获取到传递的值的

5.2接收多个对象

现在只加了一个UserInfo的调用，但是并为他赋上任何方法，那么此时肯定是错误的

所以我们现在需要对他加上一个默认值

现在改造一下definProps里面的东西，type类型为他设置一个object

由于现在不在是一个值，而是一个方法，所以不能再用普通的default来输出默认值

而是使用default（）方法，这样就可以一次性给obj里面的所有属性都赋上默认值

这样默认的名字和默认的图片就可以一次性赋上了

5.3循环接收对象

将userinfo变成一个数组

在上面调用的时候使用一个v-for循环，item为对象，index为索引

在（in）后面调用userinfo就可以了

最后在obj的地方写上对象的别名（item）

这样就可以实现循环遍历接收对象了