避免直接改变道具

Posted 2023-02-22

【中文标题】避免直接改变道具

【英文标题】：Avoid mutating a prop directly

【发布时间】：2019-11-07 05:24:55

【问题描述】：

我收到警告：

app.js:87486 [Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“likescount”

我的刀

        <path-like-toggle likescount="$path->likeCount" isliked="$path->canBeunLiked()" path="$path->slug" type="$path->type" ></path-like-toggle>

Vue 代码

      props:['isliked','path','type','likescount']
    ,
methods:
         like () 
             axios.post(`/$this.type/$this.path/like/`)
                this.likingStatus = true;
                this.likescount ++;
        ,
         unlike () 
             axios.post(`/$this.type/$this.path/unlike/`)
                this.likingStatus = false;
                this.likescount --;

        ,
    

【问题讨论】：

Vue 2 - Mutating props vue-warn的可能重复

请先搜索再询问。

【参考方案1】：

从你的 prop 初始化一个数据属性，并对其进行操作。

export default 
    data() 
        return 
            numberOfLikes: this.likescount
        
    ,

    props: [
        'isliked',
        'path',
        'type',
        'likescount'
    ],

    methods:
        like() 
            axios.post(`/$this.type/$this.path/like/`);

            // ...

            this.numberOfLikes++;
        ,

        unlike() 
            axios.post(`/$this.type/$this.path/unlike/`);

            // ...

            this.numberOfLikes--;
        ,
    

【讨论】：

示例中的组件似乎没有父组件，prop的值是在页面渲染时直接从服务器传递的。 prop 也是静态的（未使用 v-bind 绑定到 Vue 实例），这意味着即使 Vue 有父级，Vue 也无法操作它的值。因此，在这种特定情况下，您的方法是不可能的。

【参考方案2】：

正如警告所说，你不能改变道具，删除 this.likescount ++; this.likescount --;

这将消除警告......你的道具应该是纯粹的