[鸿蒙]鸿蒙开发之组件（二）：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 和 data 的属性一样都以 this 来指向。

改造好之后，我们来看看实际效果如何：

通过视频可以发现，点击之后没有任何效果，这就是 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 中的属性：

！注意：这里将原本的 src="{{imgSrc}}" 改为了 src="{{src}}"。

将传入的值用 data 的属性来接收，并将其作为默认值，再对 data 的属性进行修改。