顺序.............................................
-------------列表组件，注册组件、调用使用组件-----------------
1，子组件可能很多地方用得到，所有子组件的数据来源来自父组件
父组件在调用子组件的地方，添加一个自定义的属性，属性的值就是需要传递给子组件的值,如果需要传递的值是一个变量，或者是boolean，或者是number类型，需要使用绑定属性
<my-list :list="list" :num="list.length"></my-list>
* 在子组件定义的地方，添加一个选项 props,方式一 props的值为数组，元素为自定义的属性名
const List = { props: ['list'], template: '#list' }
可以在子组件中通过 自定义的属性名就可以拿到父组件传递的数据
2，子组件可能很多地方用得到，所有子组件的数据来源来自父组件
父组件在调用子组件的地方，添加一个自定义的属性，属性的值就是需要传递给子组件的值,如果需要传递的值是一个变量，或者是boolean，或者是number类型，需要使用绑定属性
<my-list :list="list" :num="list.length"></my-list>
* 在子组件定义的地方，添加一个选项 props, props的值是一个对象,key值为自定义的属性名，value值为数据类型 ---- 团队合作 提升代码的严谨性，如果数据类型不对，会有警告信息出现，但是不会阻止你的代码的渲染
const List = { props: { list: Number ！--（数据类型不对，数据依然会显示，但会警告（报错）） }, template: '#list' }
可以在子组件中通过 自定义的属性名就可以拿到父组件传递的数据
3，子组件可能很多地方用得到，所有子组件的数据来源来自父组件
父组件在调用子组件的地方，添加一个自定义的属性，属性的值就是需要传递给子组件的值,如果需要传递的值是一个变量，或者是boolean，或者是number类型，需要使用绑定属性
<my-list :list="list" :num="list.length"></my-list>
在子组件定义的地方，添加一个选项 props, props的值是一个对象, key值是自定义的属性名，value值为一个对象，这个对象的key值分别为 type 和 default,表示数据类型和默认值,如果数据类型是 对象和 数组，默认值必须写为函数，其余直接赋值
const List = { props: { list: { type: Array, default: function () { } } }, template: '#list' }
可以在子组件中通过 自定义的属性名就可以拿到父组件传递的数据
-----------------------------------------------------以下是一段完整代码---------------------------------
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 33 </head> 34 <body> 35 <div id="app"> 36 <my-content :shop='list' :num="list.length"></my-content> 37 </div> 38 </body> 39 <template id="content"> 40 <ul> 41 <li v-for="(item, index) of shop" :key = 'index'> 42 <img :src="item.img" alt=""> 43 <p>{{ item.title }}</p> 44 </li> 45 </ul> 46 </template> 47 <script src="../vue.js"></script> 48 <script> 49 //------第一种方法---------------- 50 // const Content = { 51 // props: ['shop'], 52 // template: "#content" 53 // } 54 //------第二种方法---------------- 55 // const Content = { 56 // props: { 57 // shop: Array 58 // }, 59 // template: "#content" 60 // } 61 //------第三种方法---------------- 62 const Content = { 63 template: "#content", 64 props: { 65 shop: { 66 type: Array, 67 default: function () { 68 69 } 70 } 71 } 72 } 73 new Vue({ 74 el: '#app', 75 data: { 76 list: [{ 77 img: 'https://img12.360buyimg.com/n7/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg', 78 title: 'Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待' 79 }, { 80 img: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t23386/9/1066712099/277967/615ccafb/5b4f0e3aN262237fc.jpg!q80.dpg.webp', 81 title: '【官方AppleCare+版】Apple MacBook Pro 15.4英寸笔记本电脑 深空灰色 配备Touch Bar 2018新款(八代i5/16G)' 82 }, { 83 img: 'https://img13.360buyimg.com/n7/jfs/t1/51521/12/10437/169738/5d780c40Eda0f0e1d/ccbc7745b343f87d.jpg', 84 title: 'Apple iPhone 11 Pro Max (A2220) 256GB 暗夜绿色 移动联通电信4G手机 双卡双待' 85 }, { 86 img: 'https://img11.360buyimg.com/n7/jfs/t1/53688/36/14138/113224/5db03763Ee6d8b784/5f5a3f4ce7490d36.jpg', 87 title: '【超级爆品】一加 OnePlus 7 Pro 2K+90Hz 流体屏 骁龙855旗舰 4800' 88 }] 89 }, 90 components: { 91 'my-content': Content 92 } 93 }) 94 </script> 95 </html>
<!
DOCTYPE
html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
style
>
ul
li {
list-style:
none;
}
* {
margin:
0;
padding:
0;
}
#app {
width:
1000px;
margin:
0
auto;
}
#app
ul {
width:
100%;
display:
flex;
justify-content:
space-between;
}
#app
ul
li {
width:
25%;
padding:
25px;
}
#app
ul
li
img {
height:
200px;
width:
200px;
}
<
/
style
>
</
head
>
<
body
>
<
div
id=
"app"
>
<
my-content
:shop=
'list'
:num=
"list.length"
></
my-content
>
</
div
>
</
body
>
<
template
id=
"content"
>
<
ul
>
<
li
v-for=
"(item, index) of shop"
:key =
'index'
>
<
img
:src=
"item.img"
alt=
""
>
<
p
>{{ item.title }}
</
p
>
</
li
>
</
ul
>
</
template
>
<
script
src=
"../vue.js"
>
<
/
script
>
<
script
>
//------第一种方法----------------
// const Content = {
// props: ['shop'],
// template: "#content"
// }
//------第二种方法----------------
// const Content = {
// props: {
// shop: Array
// },
// template: "#content"
// }
//------第三种方法----------------
const
Content = {
template:
"#content",
props: {
shop: {
type:
Array,
default
:
function () {
}
}
}
}
new
Vue({
el:
'#app',
data: {
list: [{
img:
'https://img12.360buyimg.com/n7/jfs/t1/59022/28/10293/141808/5d78088fEf6e7862d/68836f52ffaaad96.jpg',
title:
'Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待'
}, {
img:
'https://m.360buyimg.com/mobilecms/s750x750_jfs/t23386/9/1066712099/277967/615ccafb/5b4f0e3aN262237fc.jpg!q80.dpg.webp',
title:
'【官方AppleCare+版】Apple MacBook Pro 15.4英寸笔记本电脑 深空灰色 配备Touch Bar 2018新款(八代i5/16G)'
}, {
img:
'https://img13.360buyimg.com/n7/jfs/t1/51521/12/10437/169738/5d780c40Eda0f0e1d/ccbc7745b343f87d.jpg',
title:
'Apple iPhone 11 Pro Max (A2220) 256GB 暗夜绿色 移动联通电信4G手机 双卡双待'
}, {
img:
'https://img11.360buyimg.com/n7/jfs/t1/53688/36/14138/113224/5db03763Ee6d8b784/5f5a3f4ce7490d36.jpg',
title:
'【超级爆品】一加 OnePlus 7 Pro 2K+90Hz 流体屏 骁龙855旗舰 4800'
}]
},
components: {
'my-content'
:
Content
}
})
<
/
script
>
</
html
>