脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue修改props数据报错

vue修改props数据报错的问题及解决

 更新时间：2024年08月29日 10:48:35   作者：小吴吴吴呀  
这篇文章主要介绍了vue修改props数据报错的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

修改props中的数据的问题

在 Shop.vue 组件中使用 props 的数组写法接收参数 并在 methods 中创建 add 方法 点击让商品数量加一。

<template>
    <div>
        <h2>商品名称：{{ name }}</h2>
        <strong>商品价格：￥{{ price }}</strong>
        <p>商品数量：{{ num }}</p>
        <button @click="add">点击商品数量加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>

注：点击后虽然商品数量能够增加 但控制台也会报错提醒 因为这么做会出现一些莫名其妙的问题 所以 Vue 不推荐直接更改 props 中的数据。

正确修改方式

如果需要修改接收到的参数 推荐在 data 中创建一个新数据接收 props 中的数据然后使用这个新数据即可。

<template>
    <div>
        <h2>商品名称：{{ name }}</h2>
        <strong>商品价格：￥{{ price }}</strong>
        <p>商品数量：{{ myNum }}</p>
        <button @click="add">点击商品数量加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 的优先级要高于 data 所以我们能在 data 中使用 props 中的数据 另外 props 的数据也是在组件实例上绑定的 所以需要用 this 调用。

需要注意 data 中的数据名不要和 props 中的数据名一样 否则会报错。

例：

<template>
    <div>
        <h2>商品名称：{{ name }}</h2>
        <strong>商品价格：￥{{ price }}</strong>
        <p>商品数量：{{ num }}</p>
        <button @click="add">点击商品数量加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 中存在一样的数据名 默认会使用 props 中的数据。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue3如何使用element-plus的dialog

    vue3如何使用element-plus的dialog

    这篇文章主要介绍了vue3优雅的使用element-plus的dialog,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-04-04
  • 关于vue2响应式缺陷的问题

    关于vue2响应式缺陷的问题

    这篇文章主要介绍了关于vue2响应式缺陷的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue组件引用另一个组件出现组件不显示的问题及解决

    vue组件引用另一个组件出现组件不显示的问题及解决

    这篇文章主要介绍了vue组件引用另一个组件出现组件不显示的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue设计一个倒计时秒杀的组件详解

    vue设计一个倒计时秒杀的组件详解

    这篇文章主要介绍了vue设计一个倒计时秒杀的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 总结4个方面优化Vue项目

    总结4个方面优化Vue项目

    在本篇文章里我们给大家整理了一篇关于优化VUE项目的四个总要点，对此有需要的朋友们学习下天。
    2019-02-02
  • 详解Vue2的diff算法

    详解Vue2的diff算法

    这篇文章主要介绍了Vue2的diff算法的相关资料，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
    2021-01-01
  • Vue实现自动检测以及版本的更新

    Vue实现自动检测以及版本的更新

    当用户在当前站点停留时间比较长，中途站点进行升级更新之后，用户如果不刷新页面就任然停留在旧的页面里，如何让用户收到一个提示，引导用户进行更新操作呢？下面给大家介绍如何站点更新如何在生产环境提示用户更新，进行页面刷新操作，核心原理其实很简单
    2023-03-03
  • vuejs中监听窗口关闭和窗口刷新事件的方法

    vuejs中监听窗口关闭和窗口刷新事件的方法

    今天小编就为大家分享一篇vuejs中监听窗口关闭和窗口刷新事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue实现table列表项上下移动的示例代码

    Vue实现table列表项上下移动的示例代码

    本文主要介绍了Vue实现table列表项上下移动的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 解决vue cli使用typescript后打包巨慢的问题

    解决vue cli使用typescript后打包巨慢的问题

    这篇文章主要介绍了解决vue cli使用typescript后打包巨慢的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09

最新评论