Vue全家桶之組件化開(kāi)發(fā)
一、組件化開(kāi)發(fā)思想
1.現(xiàn)實(shí)中的組件化思想體現(xiàn)-模塊化手機(jī)
2.編程中的組件化思想體現(xiàn)-各種區(qū)塊
3.組件化規(guī)范:Web Components通過(guò)創(chuàng)建封裝好功能的定制元素解決上述問(wèn)題。
我們希望盡可能多的重用代碼
自定義組件的方式不太容易(html,css,js)
多次使用組件可能導(dǎo)致沖突
二、組件注冊(cè)
1.全局組件注冊(cè)語(yǔ)法
Vue.component(組件名稱,{
? ? data: 組件數(shù)據(jù)，
? ? template: 組件模塊內(nèi)容
})
注冊(cè)一個(gè)名為button-counter的新組件
Vue.component('button-counter'{
? ? data: function () {
? ? ? ? return {
? ? ? ? ? ? count:0
? ? ? ? }
? ? },
? ? template: '<button v-on:click="count++">點(diǎn)擊了{(lán){count}}次</button>
})
2.組件用法
<div id="app">
? ? <button-counter></button-counter>
</div>
3.組件注冊(cè)注意事項(xiàng)
①data必須是一個(gè)函數(shù)
分析函數(shù)與普通對(duì)象的對(duì)比
②組件模塊內(nèi)容必須是單個(gè)根元素
分析演示實(shí)例的效果
③組件模塊內(nèi)容可以是模板字符串
模板字符串需要瀏覽器提供支持(es6語(yǔ)法)
④組件命名方式
短橫線方式
Vue.component('my-component',{/*...*/})
駝峰方式
Vue.component('MyComponent',{/*...*/})//只能在模板字符串中使用，如果想在html中使用需要轉(zhuǎn)換成短橫線
4.局部組件注冊(cè)
var ComponentA = { /*...*/}
var ComponentB = { /*...*/}
new Vue ({
? ? el: '#app'
? ? components : {
? ? ? ? 'component-a' : ComponentA,
? ? ? ? 'component-b' : ComponentB
? ? }
})
三、Vue調(diào)試工具
1.調(diào)試工具安裝
2.調(diào)試工具用法
四、組件間數(shù)據(jù)交互
1.父組件向子組件傳值
①組件內(nèi)部通過(guò)props接收傳遞過(guò)來(lái)的值
Vue.component('menu-item',{
? ? props: ['title'],
? ? template: '<div>{{title}}</div>
})
②父組件通過(guò)屬性將值傳遞給子組件
<menu-item title="來(lái)自父組件的數(shù)據(jù)"></menu-item>
<menu-item :title="title"></menu-item>
③props屬性名規(guī)則
在props中使用駝峰形式，模板中需要使用短橫線的形式
字符串形式的模板中沒(méi)有這個(gè)限制
Vue.component('menu-item',{
? ? ? //在js中是駝峰式的
? props : [menuTitle'],
? template: '<div>{{menuTitle}}</div>'
})
在html中是短橫線方式的
<menu-item menu-title="nihao"></menu-item>
④props屬性值類(lèi)型
字符串String
數(shù)值Number
布爾值Boolean
數(shù)組Array
對(duì)象Object
2.子組件向父組件傳值
①子組件通過(guò)自定義事件向父組件傳值
<button v-on:click='$emit("enlarge-text") '>擴(kuò)大字體</button>
②父組件監(jiān)聽(tīng)子組件的事件
<menu-item v-on:enlarge-text='fontsize += 0.1'></menu-item>
③子組件通過(guò)自定義事件向父組件傳遞信息
<button v-on:click='$?emit("enlarge-text",0.1)'>擴(kuò)大字體</button>
④父組件監(jiān)聽(tīng)子組件的事件
<menu-item v-on:enlarge-text='fontSize += $event'></menu-item>
3.非父子組件間傳值
①單獨(dú)的事件中心管理組件間的通信
var eventHub = new Vue()
②監(jiān)聽(tīng)事件與銷(xiāo)毀事件
eventHub.$on('add-todo',addTodo)
eventHub.$off('add-todo')
③觸發(fā)事件
eventHub.$emit('add-todo',id)
五、組件插槽
1.組件插槽的作用
父組件向子組件傳遞內(nèi)容
2.組件插槽基本用法
①插槽位置
Vue.component('alert-box',{
? ? template:
? ? ? <div class="demo-alert-box">
? ? ? ? ? <strong>Error!</strong>
? ? ? ? ? <slot></slot>
? ? ? </div>
})
②插槽內(nèi)容
<alert-box>Something bad happened.</alert-box>
3.具名插槽用法
①插槽定義
<div class="container">
? ? <header>
? ? ? ? <slot name="header"></slot>
? ? </header>
? ? <main>
? ? ? <slot></slot>
? ? </main>
? ? <footer>
? ? ? <slot name="footer"></slot>
? ? </footer>
</div>
②插槽內(nèi)容
<base-layout>
? ? <h1 slot="header">標(biāo)題內(nèi)容</h1>
? ? <p>主要內(nèi)容</p>
? ? <p slot="footer">底部?jī)?nèi)容</p>
<base-layout>
4.作用域插槽
應(yīng)用場(chǎng)景:父組件對(duì)子組件的內(nèi)容進(jìn)行加工處理
①插槽定義
<ul>
? ? <li v-for="item in list" v-bind:key="item.id">
? ? ? ? <slot v-bind:item="item">
? ? ? ? ? ? {{item.name}}
? ? ? ? </slot>
? ? </li>
</ul>
②插槽內(nèi)容
<fruit-list v-bind:list="list">
? ? <template slot-scope="slotProps">
? ? ? ? <strong v-if="slotProps.item.current">
? ? ? ? ? ? {{slotProps.item.text}}
? ? ? ? </strong>
? ? ? </template>
</fruit-list>
六、基于組件的案例
購(gòu)物車(chē)
