快捷導(dǎo)航

vue修改props數(shù)據(jù)報(bào)錯(cuò)的問(wèn)題及解決

更新時(shí)間：2024年08月29日 10:48:35 作者：小吳吳吳呀

這篇文章主要介紹了vue修改props數(shù)據(jù)報(bào)錯(cuò)的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

修改props中的數(shù)據(jù)的問(wèn)題

在 Shop.vue 組件中使用 props 的數(shù)組寫法接收參數(shù) 并在 methods 中創(chuàng)建 add 方法點(diǎn)擊讓商品數(shù)量加一。

<template>
    <div>
        <h2>商品名稱：{{ name }}</h2>
        <strong>商品價(jià)格：￥{{ price }}</strong>
        <p>商品數(shù)量：{{ num }}</p>
        <button @click="add">點(diǎn)擊商品數(shù)量加1</button>
        <hr />
    </div>
</template>

<script>
export default {
    name: "Shop",
    props: ['name', 'price', 'num'],
    methods: {
        add() {
            this.num++;
        }
    }
}
</script>

然后在 Home.vue 頁(yè)面正常引入傳參將 num 用 v-bind 綁定避免傳遞字符串類型。

<template>
    <div>
        <h2>商品列表</h2>
        <hr />
        <Shop name="草莓" price="99" :num="50"></Shop>
        <Shop name="蘋果" price="30" :num="30"></Shop>
        <Shop name="葡萄" price="56" :num="20"></Shop>
    </div>
</template>

<script>
import Shop from "../components/Shop";
export default {
    name: 'Home',
    components: { Shop }
}
</script>

注：點(diǎn)擊后雖然商品數(shù)量能夠增加但控制臺(tái)也會(huì)報(bào)錯(cuò)提醒因?yàn)檫@么做會(huì)出現(xiàn)一些莫名其妙的問(wèn)題所以 Vue 不推薦直接更改 props 中的數(shù)據(jù)。

正確修改方式

如果需要修改接收到的參數(shù) 推薦在 data 中創(chuàng)建一個(gè)新數(shù)據(jù)接收 props 中的數(shù)據(jù)然后使用這個(gè)新數(shù)據(jù)即可。

<template>
    <div>
        <h2>商品名稱：{{ name }}</h2>
        <strong>商品價(jià)格：￥{{ price }}</strong>
        <p>商品數(shù)量：{{ myNum }}</p>
        <button @click="add">點(diǎn)擊商品數(shù)量加1</button>
        <hr />
        
    </div>
</template>

<script>
export default {
    name: "Shop",
    props: ['name', 'price', 'num'],
    data() {
        return {
            myNum: this.num
        }
    },
    methods: {
        add() {
            this.myNum++;
        }
    }
}
</script>

注：

這樣就可以解決這個(gè)問(wèn)題啦因?yàn)?props 的優(yōu)先級(jí)要高于 data 所以我們能在 data 中使用 props 中的數(shù)據(jù) 另外 props 的數(shù)據(jù)也是在組件實(shí)例上綁定的所以需要用 this 調(diào)用。

需要注意 data 中的數(shù)據(jù)名不要和 props 中的數(shù)據(jù)名一樣否則會(huì)報(bào)錯(cuò)。

例：

<template>
    <div>
        <h2>商品名稱：{{ name }}</h2>
        <strong>商品價(jià)格：￥{{ price }}</strong>
        <p>商品數(shù)量：{{ num }}</p>
        <button @click="add">點(diǎn)擊商品數(shù)量加1</button>
        <hr />
    </div>
</template>

<script>
export default {
    name: "Shop",
    props: ['name', 'price', 'num'],
    data() {
        return {
            num: 9
        }
    },
    methods: {
        add() {
            this.num++;
        }
    }
}
</script>