Vue組件開發(fā)初探
注冊(cè)一個(gè)組件
有兩種方式可以注冊(cè)一個(gè)組件,第一種是全局注冊(cè),第二種是局部注冊(cè)
# 全局注冊(cè) Vue.component('my-component',{ template: '<span>Hello</span>' }) # 局部注冊(cè) var child = { template: '<span>Hello</span>' } new Vue({ // ··· components:{ my-component: child } })
注意:組件的注冊(cè)必須要在Vue實(shí)例創(chuàng)建之前
使用組件
<div id="app"> <my-component></my-component> </div>
當(dāng)我們需要使用到data時(shí),data必須是一個(gè)函數(shù),否則將會(huì)報(bào)錯(cuò),這是Vue的一個(gè)規(guī)則,如下
Vue.component('my-component',{ template: '<span>{{message}}</span>', data:function(){ return {message:'hello'} } })
組件間消息傳遞
當(dāng)我們封裝了組件A,但是組件A又嵌套了組件B,這時(shí)候組件AB形成了父子組件的關(guān)系,我們應(yīng)該怎么來讓父組件傳遞消息給子組件呢,這里用到了一個(gè)屬性值props,如下
Vue.component('my-component',{ props: ['message'] template: '<span>{{message}}</span>' }) # 通過props傳遞消息給子組件 <my-component message="Hello"></my-component>
上面的例子,我們通過props傳遞了參數(shù)給子組件,確實(shí)能改變子組件的值,但是,假如我們有這樣一個(gè)要求,props的值是動(dòng)態(tài)改變的,那么這種靜態(tài)字面量傳遞參數(shù)的方式就不能滿足我們的需求了。如下將說明如何進(jìn)行動(dòng)態(tài)的props值設(shè)定
<div id="app"> <input v-model="parentMsg"><br> <my-component v-bind:message="parentMsg"> </div>
這里通過v-bind的命令,將我們的message與parentMsg進(jìn)行綁定,這樣,當(dāng)我們的parentMsg改變時(shí),message將能實(shí)時(shí)改變
自定義事件
父子組件之間如果通過props來傳遞數(shù)據(jù)的話,那么似乎只能進(jìn)行單向的數(shù)據(jù)傳遞,只能從父組件向子組件傳遞,假如我們需要從子組件傳遞消息回去,那么就需要用到自定義事件了
# 使用v-on綁定自定義事件 Vue.component('my-component',{ template: '<button v-on:click="increment">{{counter}}</button>', data: function(){ return {counter: 0} }, methods: { increment: function(){ this.counter += 1; this.$emit(increment); } } }) new Vue({ el: '#app', data: { // ··· total:0 }, methods: { // ··· incrementTotal: function(){ this.total += 1; } } })
<div id="app"> // ··· <p>{{total}}</p> <my-component v-on:increment="incrementTotal"></my-component> </div>
這里,我們點(diǎn)擊按鈕,按鈕的顯示的數(shù)值將會(huì)改變,同時(shí),total的值也會(huì)動(dòng)態(tài)的改變,這就是子組件回傳數(shù)據(jù)的實(shí)例,我們點(diǎn)擊按鈕時(shí),將會(huì)首先執(zhí)行button的onclick方法,在onclick方法里面,通過this.$emit('increment')來執(zhí)行我們自定義的事件,假如我們需要在$emit中添加參數(shù),那么我們就要在$on()中進(jìn)行回調(diào)的處理
我們接下來自定義一個(gè)表單輸入控件,我們?cè)谳斎肟蛑休斎胄畔?,同時(shí)在P標(biāo)簽中顯示出來。
這里我們平時(shí)使用的
v-model="message"
其實(shí)是下面語句的一個(gè)簡(jiǎn)化版本,也就是語法糖
v-bind:value="message" v-on:input="message = arguments[0]"
或者
v-bind:value="message" v-on:input="message = $event.target.value"
那么自定義表單控件我們需要干什么呢?
為了讓v-model生效,我們需要在子組件中定義一個(gè)value的屬性,還有一個(gè)監(jiān)聽新值產(chǎn)生的input事件
來看看我們的自定義控件
<my-input label="Message" :value="message" @input="message = arguments[0]"></my-input>
在上面,我們通過 :value="message" 綁定一個(gè)value使其與上一級(jí)組件的message相掛鉤,后面這個(gè) v-on:input 是子組件定義的事件,事件名可以自己定義,arguments[0] 是組件自定義時(shí)傳入的第一個(gè)參數(shù)
完整代碼如下:
# 使用自定義事件的表單輸入控件 Vue.component('my-input',{ template: '\ <div>\ <label>{{label}} :</label>\ <input v-bind:value="value" v-on:input="onInput"></input>\ </div>\ ' , props:['value','label'], methods:{ onInput:function(event){ this.$emit('input',event.target.value); // this.$emit('input') } } })
<div id="app"> <p>{{message}}</p> <my-input label="Message" v-model="message"></my-input><br> <!-- <my-input label="Message" :value="message" @input="message = arguments[0]"></my-input> --> </div>
我們?cè)诙x內(nèi)部事件時(shí),調(diào)用到了$emit(),為了讓message能動(dòng)態(tài)改變,我們需要將輸入的參數(shù)回傳回去,這樣才能使外部組件與我們的表單控件顯示一致
Vue組件的就先寫到這,接下來還有事件分發(fā),就接下來再寫。由于理解的不同,可能有寫得不好的,所以有錯(cuò)誤的地方請(qǐng)指正。
相關(guān)文章
Vue滾動(dòng)頁面到指定位置的實(shí)現(xiàn)及避坑
這篇文章主要介紹了Vue滾動(dòng)頁面到指定位置的實(shí)現(xiàn)及避坑,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09基于Vue組件化的日期聯(lián)動(dòng)選擇器功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了基于Vue組件化的日期聯(lián)動(dòng)選擇器的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11關(guān)于vue項(xiàng)目部署后刷新網(wǎng)頁報(bào)404錯(cuò)誤解決
這篇文章主要介紹了關(guān)于vue項(xiàng)目部署后刷新網(wǎng)頁報(bào)404錯(cuò)誤解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07使用Vue.js實(shí)現(xiàn)一個(gè)循環(huán)倒計(jì)時(shí)功能
在Web應(yīng)用中,倒計(jì)時(shí)功能常用于各種場(chǎng)景,如活動(dòng)倒計(jì)時(shí)、定時(shí)任務(wù)提醒等,Vue.js作為一款輕量級(jí)的前端框架,提供了豐富的工具和API來實(shí)現(xiàn)這些功能,本文將詳細(xì)介紹如何使用Vue.js實(shí)現(xiàn)一個(gè)循環(huán)倒計(jì)時(shí)功能,需要的朋友可以參考下2024-09-09Vue.Draggable實(shí)現(xiàn)交換位置
這篇文章主要為大家詳細(xì)介紹了Vue.Draggable實(shí)現(xiàn)交換位置,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04詳談Vue.js框架下main.js,App.vue,page/index.vue之間的區(qū)別
這篇文章主要介紹了詳談Vue.js框架下main.js,App.vue,page/index.vue之間的區(qū)別,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08