目录修改props中的数据的问题在 Shop.vue 组件中使用 props 的数组写法吸收参数 并在 methods 中创建 add 方法 点击让商品数量加一。 [code]<template> <div> <h2>商品名称：{{ name }}</h2> <strong>商品代价：￥{{ price }}</strong> <p>商品数量：{{ num }}</p> <button @click="add">点击商品数量加1</button> <hr /> </div> </template>[/code] [code]<script> export default { name: "Shop", props: ['name', 'price', 'num'], methods: { add() { this.num++; } } } </script>[/code]然后在 Home.vue 页面正常引入传参 将 num 用 v-bind 绑定 避免传递字符串类型。 [code]<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>[/code] [code]<script> import Shop from "../components/Shop"; export default { name: 'Home', components: { Shop } } </script>[/code]注：点击后固然商品数量可以或许增加 但控制台也会报错提示 因为这么做会出现一些莫名其妙的问题 以是 Vue 不推荐直接更改 props 中的数据。
精确修改方式如果必要修改吸收到的参数 推荐在 data 中创建一个新数据吸收 props 中的数据然后使用这个新数据即可。 [code]<template> <div> <h2>商品名称：{{ name }}</h2> <strong>商品代价：￥{{ price }}</strong> <p>商品数量：{{ myNum }}</p> <button @click="add">点击商品数量加1</button> <hr /> </div> </template>[/code] [code]<script> export default { name: "Shop", props: ['name', 'price', 'num'], data() { return { myNum: this.num } }, methods: { add() { this.myNum++; } } } </script>[/code]注： 如许就可以解决这个问题啦 因为 props 的优先级要高于 data 以是我们能在 data 中使用 props 中的数据 另外 props 的数据也是在组件实例上绑定的 以是必要用 this 调用。
必要注意 data 中的数据名不要和 props 中的数据名一样 否则会报错。 例： [code]<template> <div> <h2>商品名称：{{ name }}</h2> <strong>商品代价：￥{{ price }}</strong> <p>商品数量：{{ num }}</p> <button @click="add">点击商品数量加1</button> <hr /> </div> </template>[/code] [code]<script> export default { name: "Shop", props: ['name', 'price', 'num'], data() { return { num: 9 } }, methods: { add() { this.num++; } } } </script>[/code]
注： 如果 data 和 props 中存在一样的数据名 默认会使用 props 中的数据。 总结以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。 来源：https://www.jb51.net/javascript/326678r5i.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 03:31 , Processed in 0.029760 second(s), 19 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
