組件化開發(fā)思想
現(xiàn)實中的組件化思想體現(xiàn)
（1）標(biāo)準(zhǔn)
（2）分治
（3）重用
（4）組合
編程中的組件化思想體現(xiàn)
- 組件化規(guī)范：Web Components
（1）我們希望盡可能多的重用代碼
（2）自定義組件的方式不太容易（html绽媒、css和js）
（3）多次使用組件可能導(dǎo)致沖突
官網(wǎng)：https://developer.mozilla.org/zh-CN/docs/Web/Web_Components
組件注冊
全局組件注冊語法
組件用法
單獨使用
重復(fù)使用
組件注冊注意事項
（1）data必須是一個函數(shù)
?????????分析函數(shù)與普通對象的對比
（2）組件模板內(nèi)容必須是單個跟元素
?????????分析演示實際的效果
（3）組件模板內(nèi)容可以是模板字符串
?????????模板字符串需要瀏覽器提供支持（ES6語法）
（4）組件命名方式
?????????① 短橫線方式
?????????② 駝峰方式
如果使用駝峰式命名組件，那么在使用組件的時候树叽，只能在字符串模板中用駝峰的方式使用組件，但是在普通的標(biāo)簽?zāi)０逯惺郎保仨毷褂枚虣M線的方式使用組件烹棉。
局部組件注冊
局部組件只能在注冊他的父組件中使用。
組件間數(shù)據(jù)交互
父組件向子組件傳值
（1）組件內(nèi)部通過 props 接收傳遞過來的值
（2）父組件通過屬性將值傳遞給子組件
（3）props屬性名規(guī)則
?????????① 在props中使用駝峰形式岖圈，模板中需要使用短橫線的形式鹦牛。
?????????② 字符串形式的模板中沒有這個限制搞糕。
（4）props屬性值類型
?????????① 字符串 String
?????????② 數(shù)值 Number
?????????③ 布爾值 Boolean
?????????④ 數(shù)組 Array
?????????⑤ 對象 Object
注意是否屬性綁定
子組件向父組件傳值（不帶參數(shù)）
（1）子組件通過自定義事件向父組件傳遞信息
（2）父組件監(jiān)聽子組件的事件
子組件向父組件傳值（攜帶參數(shù)）
（1）子組件通過自定義事件向父組件傳遞信息
（2）父組件監(jiān)聽子組件的事件
- 非父子組件間傳值
（1）單獨的事件中心管理組件間的通信
（2）監(jiān)聽事件與銷毀事件
（3）觸發(fā)事件
參考代碼：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>兄弟組件之間數(shù)據(jù)交互</title> </head> <body> <div id="app"> <div>父組件</div> <div> <button @click='handle'>銷毀事件</button> </div> <test-tom></test-tom> <test-jerry></test-jerry> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> // 提供事件中心 var hub = new Vue(); Vue.component('test-tom', { data: function() { return { num: 0 } }, template: ` <div> <div>TOM:{{num}}</div> <div> <button @click='handle'>點擊</button> </div> </div> `, methods: { handle: function() { hub.$emit('jerry-event', 2); } }, mounted: function() { // 監(jiān)聽事件 hub.$on('tom-event', (val) => { this.num += val; }); } }); Vue.component('test-jerry', { data: function() { return { num: 0 } }, template: ` <div> <div>JERRY:{{num}}</div> <div> <button @click='handle'>點擊</button> </div> </div> `, methods: { handle: function() { // 觸發(fā)兄弟組件的事件 hub.$emit('tom-event', 1); } }, mounted: function() { // 監(jiān)聽事件 hub.$on('jerry-event', (val) => { this.num += val; }); } }); var vm = new Vue({ el: '#app', data: { }, methods: { handle: function() { hub.$off('tom-event'); hub.$off('jerry-event'); } } }); </script> </body> </html>
組件插槽
組件插槽的作用
父組件向子組件傳遞內(nèi)容。
組件插槽基本用法
（1）插槽位置
（2）插槽內(nèi)容
具名插槽用法
（1）插槽定義
（2）插槽內(nèi)容
- 作用域插槽
應(yīng)用場景：父組件對子組件的內(nèi)容進行加工處理曼追。
（1）插槽定義
（2）插槽內(nèi)容
參考代碼：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>作用域插槽用法</title> </head> <style> .current { color: orange; } </style> <body> <div id="app"> <fruit-list :list='list'> <template slot-scope='slotProps'> <strong v-if='slotProps.info.id==3' class="current">{{slotProps.info.name}}</strong> <span v-else>{{slotProps.info.name}}</span> </template> </fruit-list> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> Vue.component('fruit-list', { props: ['list'], template: ` <div> <li :key='item.id' v-for='item in list'> <slot :info='item'>{{item.name}}</slot> </li> </div> ` }); var vm = new Vue({ el: '#app', data: { list: [{ id: 1, name: 'apple' }, { id: 2, name: 'orange' }, { id: 3, name: 'banana' }] } }); </script> </body> </html>
