提出问题
vue教程：全局组件（非单文件）-给组件传值（静态传值） 中，传值的类型都是字符串类型，无法传数字、布尔、数组类型
解决
通过动态传值解决
动态传值
定义组件
与 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教程：全局组件（非单文件）-给组件传值（静态传值） 案例相同
// 第二步：注册组件
Vue.component( "jd-goods" , goods )
使用组件
关键： 通过 v-bind 动态传值
<div id="app">
<jd-goods v-bind:gname="name1" :price="price1" :img="img1" 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-bind:gname="name1" :price="price1" :img="img1" 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:{
name1:"小天鹅洗衣机",
price1:2000,
img1:"img/20231116_133706.png",
}
});
</script>
</body>
</html>
缺点
这种方式，只能传一个商品的信息，如果要传多个商品信息，就需要定义数组