Vue2.0學(xué)習(xí)之詳解Vue 組件及父子組件通信
什么是組件?
vue中的組件其實(shí)就是頁(yè)面組成的一部分,好比是電腦中的每一個(gè)元件(如硬盤,鍵盤,鼠標(biāo)),它就是一個(gè)具有獨(dú)立邏輯或界面,同時(shí)又能根據(jù)規(guī)定的接口規(guī)則進(jìn)行相互融合,變成一個(gè)完整的應(yīng)用。
頁(yè)面就是由一個(gè)個(gè)類似這樣的部分組成的,比如導(dǎo)航,列表,彈窗,下拉列表等。頁(yè)面只不過(guò)是這些組件的容器,組件自由組合形成功能完整的界面,當(dāng)不需要某個(gè)組件,或者想要替換某個(gè)組件時(shí),可以隨時(shí)進(jìn)行替換和刪除,而不影響整個(gè)應(yīng)用的運(yùn)行。
前端組件化的核心思路就是將一個(gè)巨大復(fù)雜的東西拆分成顆粒度合理的小東西。
使用組件的好處?
1、提高開(kāi)發(fā)效率
2、方便重復(fù)使用
3、簡(jiǎn)化調(diào)試步驟
4、提升整個(gè)項(xiàng)目的可維護(hù)性
5、便于協(xié)同開(kāi)發(fā)
vue中的組件
vue中的組件是一個(gè)自定義標(biāo)簽,vue.js的編譯器為它添加特殊功能
vue中的組件也可以擴(kuò)展原生的html元素,封裝可重用的代碼
組件的基本組成:樣式結(jié)構(gòu),行為邏輯,數(shù)據(jù)
注冊(cè)組件
全局注冊(cè)
可以在任何模板中使用,使用之前要先注冊(cè)
語(yǔ)法:使用Vue.compontent(組件名,選項(xiàng)對(duì)象)
組件名命名約定:駝峰,烤串
在html中使用組件:使用烤串命名法
例如,注冊(cè)Vue.compontent('my-compontent',{}),使用的時(shí)候<my-compontent></my-compontent>
<div id="app"> <h2>自定義下拉框</h2> <cus-list></cus-list> <cus-list></cus-list> </div> <script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script> <script type="text/javascript"> // 全局注冊(cè)組件 Vue.component('cus-list',{ data(){ return { } }, template:` <section> <div> <div> <input type="text"> <input type="button" name="" value=""> <span></span> </div> </div> </section> ` }) new Vue({ el:"#app", data:{ } }) </script>
使用的時(shí)候,只要在頁(yè)面上召喚這個(gè)組件就可使用,并且可以復(fù)用。
組件.png
局部注冊(cè)
在組件實(shí)例中通過(guò)選項(xiàng)對(duì)象注冊(cè),只在所注冊(cè)的作用域中使用
<div id="app"> <h2>自定義下拉框</h2> <cus-list></cus-list> <cus-list></cus-list> </div> <script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script> <script> new Vue({ el:"#app", components:{ 'cus-list':{ template:` <section> <div> <div> <input type="text"> <input type="button" name="" value=""> <span></span> </div> </div> </section> ` } }, data:{ } }) </script>
局部注冊(cè)的組件,只有在當(dāng)前實(shí)例的作用域中才可以使用,在作用域中也可以復(fù)用,效果如下。
組件.png
父子組件間通信
父組件給子組件通信
父組件===》子組件(用props)
組件實(shí)例的作用域是孤立的,不能再子組件直接用父組件的數(shù)據(jù)。
可以在組件上使用自定義屬性綁定數(shù)據(jù),在組件中組要顯示的用props生命自定義屬性名。
也就是記住一句話,父組件給子組件傳值得時(shí)候,就是調(diào)用組件時(shí)給組件添加 一個(gè)屬性,然后在組件內(nèi)用props接收即可,組件內(nèi)根據(jù)屬性名即可使用。
<div id="app"> <h2>自定義下拉框</h2> <cus-list btn-value="查詢"></cus-list> <cus-list btn-value="搜索"></cus-list> </div> <script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script> <script> Vue.component('cus-list',{ data(){ }, props:['btnValue'], template:` <section> <div> <div> <input type="text"> <input type="button" name="" :value="btnValue"> <span></span> </div> </div> </section> ` }) new Vue({ el:"#app", data:{ } }) </script>
頁(yè)面效果
props傳值.png
子組件給父組件通信
子組件===》父組件
需要用到自定義時(shí)間,父組件用$on監(jiān)聽(tīng)自定義事件,$emit觸發(fā)父組件所關(guān)心的自定義事件。
1、在子組件中定義事件內(nèi)容<li v-for="item of list" @click="clickLi(item)">{{item}}</li>
2、父組件中v-on自定義事件進(jìn)行接收v-on:receive="changeValue"
3、在觸發(fā)子組件事件的時(shí)候,$emit 通知父組件 this.$emit("receive",item);
4、父組件根據(jù)自定義事件進(jìn)行相應(yīng)反饋changeValue:function(value){this.val = value;}
看如下案例,點(diǎn)擊input的時(shí)候,出現(xiàn)下拉列表框,選中相應(yīng)的列表,列表內(nèi)容出現(xiàn)在input框中。
<div id="app"> <h2>自定義下拉框</h2> <cus-list select-Value="搜索" v-bind:list="list1" > </cus-list> </div> <script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script> <script type="text/javascript"> // 全局注冊(cè)組件 Vue.component('cus-list',{ data(){ return { selectShow:false, val:'' } }, props:['selectValue','list'], template:` <section> <div> <div> <input type="text" @click="selectShow = !selectShow" :value="val"> <input type="button" name="" :value="selectValue"> </div> <list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li> </div> </section> `, methods:{ changeValue:function(value){ this.val = value; } } }) Vue.component('list-li',{ props:['list'], template:` <ul> <li v-for="item of list" @click="clickLi(item)">{{item}}</li> </ul> `, methods:{ clickLi:function(item){ this.$emit("receive",item); } } }) new Vue({ el:"#app", data:{ list1:['宋仲基','余文樂(lè)','鹿晗','陳小春','黃曉明','易烊千璽'] } }) </script>
組件最基本的應(yīng)用就是如此,深入的應(yīng)用,就會(huì)發(fā)現(xiàn)很多剛好玩的東西。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
在IDEA中配置eslint和prettier的全過(guò)程
日常開(kāi)發(fā)中,建議用可以用Prettier做代碼格式化,然后用eslint做校驗(yàn),下面這篇文章主要給大家介紹了關(guān)于在IDEA中配置eslint和prettier的相關(guān)資料,需要的朋友可以參考下2024-02-02Vue keepAlive頁(yè)面強(qiáng)制刷新方式
這篇文章主要介紹了Vue keepAlive頁(yè)面強(qiáng)制刷新方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05基于Vue3實(shí)現(xiàn)鼠標(biāo)滑動(dòng)和滾輪控制的輪播
在這篇文章主要為大家詳細(xì)介紹了如何一步步地實(shí)現(xiàn)一個(gè)基于?Vue?3?的輪播組件,這個(gè)組件的特點(diǎn)是可以通過(guò)鼠標(biāo)滑動(dòng)和滾輪來(lái)控制輪播圖的切換,感興趣的可以了解下2024-02-02一文詳解vue3項(xiàng)目實(shí)戰(zhàn)中的接口調(diào)用
在企業(yè)開(kāi)發(fā)過(guò)程中,往往有著明確的前后端的分工,前端負(fù)責(zé)接收、使用接口,后端負(fù)責(zé)編寫、處理接口,下面這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目實(shí)戰(zhàn)中的接口調(diào)用的相關(guān)資料,需要的朋友可以參考下2022-12-12vue 實(shí)現(xiàn)setInterval 創(chuàng)建和銷毀實(shí)例
這篇文章主要介紹了vue 實(shí)現(xiàn)setInterval 創(chuàng)建和銷毀實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07關(guān)于Vue?ui?的沒(méi)反應(yīng)、報(bào)錯(cuò)問(wèn)題解決總結(jié)
這篇文章主要介紹了關(guān)于Vue?ui?的沒(méi)反應(yīng)、報(bào)錯(cuò)問(wèn)題解決總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue表單預(yù)校驗(yàn) validate方法不生效問(wèn)題
這篇文章主要介紹了Vue表單預(yù)校驗(yàn) validate方法不生效問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04