Vue2.0开发之——购物车案例-Goods组件封装-商品名称和图片(46)
迪丽瓦拉
2024-05-29 05:49:32
0次
一 概述
- 循环渲染Goods组件
- 为Goods组件封装title属性
- 为Goods组件封装pic属性
二 循环渲染Goods组件
2.1 App.vue中导入Goods组件
import Goods from '@/components/Goods/Goods.vue'
2.2 App.vue中注册Goods组件
components: {Header,Goods}
2.3 循环渲染每一个商品的信息
2.4 效果图
三 为Goods组件封装title属性
3.1 Goods.vue中定义要渲染的商品标题title
export default {props:{//商品标题title:{default:'',type:String}}
}
3.2 商品标题修改
修改前
商品名称商品名称商品名称商品名称
修改后(从父向子Goods传值)
{{title}}
3.3 App.vue中设置title的值
3.4 修改title后的效果图
四 为Goods组件封装pic属性
4.1 Goods.vue中定义要渲染的商品图片pic
export default {props:{//商品标题title:{default:'',type:String},//商品图片pic:{default:'',type:String}}
}
4.2 商品图片修改
修改前：
![]()
修改后
![]()
4.3 App.vue中设置pic的值
4.4 修改pic后的效果图
上一篇：Vue数据双向绑定
下一篇：德鲁特金属导电理论（Drude）