uni-app通过props传递值

  • props不同页面之间的数据传递
  • 首先创建一个目录components名字不能写错

1.选择新建组建,如果没有出现新建组建那就是名字打错了。

2.使用scss模板,组件名字尽量规范点使用驼峰命名法。或者xx-mm的方式命名

3.在里面编写一些数据,可以看到现在还没有传递值还是使用的普通方式

4.在父类中使用文件名就能直接引用了,components是vue提供的一种简单的引入方式不用写import进行引入了,在父类中根据文件名编写UserInfo,可以看到复制了三份页面上也显示了三份。

5.当我们进行传值时使用defineProps()方法接收从父类传过来的值,里面的名字不能随便写,是与标签上对应的。

父类中使用子类方法中定义的名字进行传递值,可以看到我们现在只对第一个标签传递了一个张三在页面中也只显示了一个张三所以他是按照顺序进行传递的,你给第一个传那我就给第一个赋值

6.当然我们也可以通过变量进行赋值,使用变量可以让我们的代码更加的灵活,当然这是按照情况来的,使用变量时名字前面要加冒号不然他就会将name当做字符串的格式传递过去。

7.刚才我们是定义了两个值的,现在我们指着将图片地址传递过去,传递的只可以有多个

当我们在进行赋值的记得前要加冒号不然就成字符串了,可以看到我们传递了三张图片过去,全部都显示了

8.当我们试着将传过来的名字添加一个 “@” 符号时可能会出现的问题,我们可以看到在后面添加了个“@”符号后并输出到控制台,会发现控制台在报错,这是因为它是一个只读的不能对它进行修改

9.这时候使用一个计算属性对它进行改造后在输出,页面上就直接使用修改后的变量了,这里可以看到在它后面添加的“@”符号也显示出来了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值