順序.............................................
-------------列表組件，注冊組件、調用使用組件-----------------
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>