提出问题
在 vue教程：全局组件（非单文件） 例子中，数据时写死在组件中，显示的数据是相同的
解决
使用组件时，给组件传值，这里介绍的是静态传值
给组件传值
定义组件
// 第一步：定义组件
var goods = {
template:`
<div>
<img :src="img" :width="img_width" >
<br>
{{gname}}
<div v-text="price"></div>
</div>
`,
data: function(){
return {
}
},
// 从组件的属性中获取值
props:["gname","price","img","img_width"]
}
注册组件
// 第二步：注册组件
Vue.component( "jd-goods" , goods )
使用组件
使用组件时，通过 属性 传值
关键： 属性名 必须 与 props 中的同名
缺点：这种将值写在属性中的方式，就是 静态传值，值的类型 都是 字符串，无法传 数字、布尔类型
<div id="app">
第三步：使用组件
<jd-goods gname="小天鹅洗衣机" price="2000" img="img/20231116_133706.png" img_width="200"></jd-goods>
<jd-goods gname="iphone" price="5000" img="img/iphone.jpg" img_width="200"></jd-goods>
<jd-goods gname="鼠标" price="300" img="img/mouse.jpg" 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 gname="小天鹅洗衣机" price="2000" img="img/20231116_133706.png" img_width="200"></jd-goods>
<jd-goods gname="iphone" price="5000" img="img/iphone.jpg" img_width="200"></jd-goods>
<jd-goods gname="鼠标" price="300" img="img/mouse.jpg" 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 {
}
},
// 从组件的属性中获取值
props:["gname","price","img","img_width"]
}
//第二步：注册组件
Vue.component( "jd-goods" , goods )
var vm = new Vue({
el:'#app',//选择器: id 样式、元素选择器等 但元素选择器不能绑定body html元素
data:{
}
});
</script>
</body>
</html>
缺点
这种将值写在属性中的方式，就是 静态传值，值的类型 都是 字符串，无法传 数字、布尔类型