ArkUI 组件 Props
2024-09-01 16:53:53
在上一篇博客文章中简单地提到了 Props 。
在使用 Props 时需要注意到一个点，子组件从寄主页面传递过来的值是单向的，也就是子组件不能直接修改传递下来的值，即单向性。
以上篇文章定义的头像组件为例，我希望点击头像之后，头像的地址会发生改变。
export default {
props: {
imgSrc: {
default: 'https://pic.cnblogs.com/avatar/2271881/20210617130249.png'
}
},
changeImgSrc() {
this.imgSrc = 'https://img1.baidu.com/it/u=1723224959,3151955398&fm=26&fmt=auto'
}
}
改造好之后，我们来看看实际效果：
通过动图演示的结果来看，点击之后没有任何效果。由于 Props 的单向性。如果子组件要修改 Props，必须要先把 Prop 传递给 data 中的一个属性：
export default {
data() {
return {
// 1. 把 imgSrc 传递给 _imgSrc
_imgSrc: this.imgSrc
}
},
// 2. 现在就可以改变从寄主页面传递过来的值
changeImgSrc() {
this._imgSrc = 'https://img1.baidu.com/it/u=1723224959,3151955398&fm=26&fmt=auto'
}
}
并且，也要修改组件的 image 标签 src 属性引用的值为 data 中的属性：
<div class="container" style="height: {{size}} px; width: {{size}} px;">
<image class="img" @click="changeImgSrc" src="{{_imgSrc}}"></image>
</div>
将传入的值用 data 的属性来接收，并将其作为默认值，再对 data 的属性进行修改。
最新文章
- MVC4.0 扩展辅助方法
- VTK GetScalarPointer() and GetScalarComponentAsFloat() not work
- .htaccess根据IP地址限制访问
- SQL Server 利用锁提示优化Row_number()-程序员需知
- ncp的简单实用
- (转)Linux上的Shebang符号(#!)
- 求关注 wcf bindipendpointdelegate 端口限制的功能
- HashMap和Hashtable
- web前端面试题及答案
- 急速搭建SuperMap iCloudManager for Docker环境
- toggle的用法（点击更换不同的function）当指定元素被点击时，在两个或多个函数之间轮流切换。
- 通过 bsondump 命令工具 解析备份产生的bson文件
- 19.Scharr滤波器
- java中对类中成员的排序
- selenium3+python3.6爬页面源码的代码
- SET XACT_ABORT ON是什么？
- MySQl ifnull()和substr()
- nginx 启动报错 1113: No mapping for the Unicode character exists in the target multi-byte code
- day 32 管道 事件 信号量 进程池
- 彻底搞清楚Java并发 (一) 基础