ArkUI 组件 Props

在上一篇博客文章中简单地提到了 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 的属性进行修改。