提出问题
在 vue教程：全局组件（非单文件）-给组件传值（动态传值） 案例中，只能传一个商品，这是不合理的
解决
定义数组，将多个商品信息放到数组中
改进
定义组件
// 第一步：定义组件
var goods = {
template:`
<div>
<img :src="img" :width="img_width" >
<br>
{{gname}}
<div v-text="price"></div>
</div>
`,
data: function(){
return {
}
},
// 从组件的 gname 等属性中获取值
props:["gname","price","img","img_width"]
}
注册组件
//第二步：注册组件
Vue.component( "jd-goods" , goods )
定义数据
创建 vue 对象时，指定 数组类型 的数据，该数组的元素是 {} 对象，对象封装的是 商品信息
如下：
var vm = new Vue({
el:'#app',
data:{
goods:[
{
name:"小天鹅洗衣机",
price:2000,
img:"img/20231116_133706.png",
},
{
name:"逻辑",
price:5000,
img:"img/iphone.jpg",
},
{
name:"蝰蛇",
price:3000,
img:"img/mouse.jpg",
},
]
}
});
使用组件
关键： 在组件中使用 v-for 指令，遍历数组中的数据，同时给组件传值
<div id="app">
<jd-goods v-for="(item,index) in goods" :key="index" v-bind:gname="item.name" :price="item.price" :img="item.img" img_width="200"></jd-goods>
</div>
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<jd-goods v-for="(item,index) in goods" :key="index" v-bind:gname="item.name" :price="item.price" :img="item.img" img_width="200"></jd-goods>
</div>
<script type="text/javascript">
// 第一步：定义组件
var goods = {
template:`
<div>
<img :src="img" :width="img_width" >
<br>
{{gname}}
<div v-text="price"></div>
</div>
`,
data: function(){
return {
}
},
// 从组件的 gname 等属性中获取值
props:["gname","price","img","img_width"]
}
//第二步：注册组件
Vue.component( "jd-goods" , goods )
var vm = new Vue({
el:'#app',//选择器: id 样式、元素选择器等 但元素选择器不能绑定body html元素
data:{
goods:[
{
name:"小天鹅洗衣机",
price:2000,
img:"img/20231116_133706.png",
},
{
name:"逻辑",
price:5000,
img:"img/iphone.jpg",
},
{
name:"蝰蛇",
price:3000,
img:"img/mouse.jpg",
},
]
}
});
</script>
</body>
</html>