顺序.............................................
-------------列表组件，注册组件、调用使用组件-----------------
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" > 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>
原文：https://www.cnblogs.com/shun1015/p/11748090.html