欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue修改props數(shù)據(jù)報錯的問題及解決

 更新時間：2024年08月29日 10:48:35   作者：小吳吳吳呀  
這篇文章主要介紹了vue修改props數(shù)據(jù)報錯的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

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

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

<template>
    <div>
        <h2>商品名稱：{{ name }}</h2>
        <strong>商品價格：￥{{ price }}</strong>
        <p>商品數(shù)量：{{ num }}</p>
        <button @click="add">點擊商品數(shù)量加1</button>
        <hr />
    </div>
</template>
<script>
export default {
    name: "Shop",
    props: ['name', 'price', 'num'],
    methods: {
        add() {
            this.num++;
        }
    }
}
</script>

然后在 Home.vue 頁面正常引入傳參 將 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>

注：點擊后雖然商品數(shù)量能夠增加 但控制臺也會報錯提醒 因為這么做會出現(xiàn)一些莫名其妙的問題 所以 Vue 不推薦直接更改 props 中的數(shù)據(jù)。

正確修改方式

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

<template>
    <div>
        <h2>商品名稱：{{ name }}</h2>
        <strong>商品價格：￥{{ price }}</strong>
        <p>商品數(shù)量：{{ myNum }}</p>
        <button @click="add">點擊商品數(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>

注：

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

需要注意 data 中的數(shù)據(jù)名不要和 props 中的數(shù)據(jù)名一樣 否則會報錯。

例：

<template>
    <div>
        <h2>商品名稱：{{ name }}</h2>
        <strong>商品價格：￥{{ price }}</strong>
        <p>商品數(shù)量：{{ num }}</p>
        <button @click="add">點擊商品數(shù)量加1</button>
        <hr />
    </div>
</template>
<script>
export default {
    name: "Shop",
    props: ['name', 'price', 'num'],
    data() {
        return {
            num: 9
        }
    },
    methods: {
        add() {
            this.num++;
        }
    }
}
</script>

注：

如果 data 和 props 中存在一樣的數(shù)據(jù)名 默認(rèn)會使用 props 中的數(shù)據(jù)。

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue+iview寫個彈框的示例代碼

    vue+iview寫個彈框的示例代碼

    本篇文章主要介紹了vue+iview寫個彈框的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • vue 對axios get pust put delete封裝的實例代碼

    vue 對axios get pust put delete封裝的實例代碼

    在本篇文章里我們給各位整理的是一篇關(guān)于vue 對axios get pust put delete封裝的實例代碼內(nèi)容，有需要的朋友們可以參考下。
    2020-01-01
  • Vue.js每天必學(xué)之表單控件綁定

    Vue.js每天必學(xué)之表單控件綁定

    Vue.js每天必學(xué)之表單控件綁定，如何在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定，感興趣的小伙伴們可以參考一下
    2016-09-09
  • Ant Design Vue Table組件合并單元格方式

    Ant Design Vue Table組件合并單元格方式

    這篇文章主要介紹了Ant Design Vue Table組件合并單元格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-04-04
  • vue?懶加載組件chunk相對路徑混亂問題及解決

    vue?懶加載組件chunk相對路徑混亂問題及解決

    這篇文章主要介紹了vue?懶加載組件chunk相對路徑混亂問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04

    • 最新評論