這篇文章將為大家詳細(xì)講解有關(guān)Vue組件及父子組件通信的示例分析,小編覺得挺實(shí)用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)-云計(jì)算及IDC服務(wù)提供商,涵蓋公有云、IDC機(jī)房租用、西部信息服務(wù)器托管、等保安全、私有云建設(shè)等企業(yè)級互聯(lián)網(wǎng)基礎(chǔ)服務(wù),歡迎來電:13518219792
什么是組件?
vue中的組件其實(shí)就是頁面組成的一部分,好比是電腦中的每一個元件(如硬盤,鍵盤,鼠標(biāo)),它就是一個具有獨(dú)立邏輯或界面,同時又能根據(jù)規(guī)定的接口規(guī)則進(jìn)行相互融合,變成一個完整的應(yīng)用。
頁面就是由一個個類似這樣的部分組成的,比如導(dǎo)航,列表,彈窗,下拉列表等。頁面只不過是這些組件的容器,組件自由組合形成功能完整的界面,當(dāng)不需要某個組件,或者想要替換某個組件時,可以隨時進(jìn)行替換和刪除,而不影響整個應(yīng)用的運(yùn)行。
前端組件化的核心思路就是將一個巨大復(fù)雜的東西拆分成顆粒度合理的小東西。
使用組件的好處?
1、提高開發(fā)效率
2、方便重復(fù)使用
3、簡化調(diào)試步驟
4、提升整個項(xiàng)目的可維護(hù)性
5、便于協(xié)同開發(fā)
vue中的組件
vue中的組件是一個自定義標(biāo)簽,vue.js的編譯器為它添加特殊功能
vue中的組件也可以擴(kuò)展原生的html元素,封裝可重用的代碼
組件的基本組成:樣式結(jié)構(gòu),行為邏輯,數(shù)據(jù)
注冊組件
全局注冊
可以在任何模板中使用,使用之前要先注冊
語法:使用Vue.compontent(組件名,選項(xiàng)對象)
組件名命名約定:駝峰,烤串
在html中使用組件:使用烤串命名法
例如,注冊Vue.compontent('my-compontent',{}),使用的時候<my-compontent></my-compontent>
<div id="app"> <h3>自定義下拉框</h3> <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"> // 全局注冊組件 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>
使用的時候,只要在頁面上召喚這個組件就可使用,并且可以復(fù)用。
組件.png
局部注冊
在組件實(shí)例中通過選項(xiàng)對象注冊,只在所注冊的作用域中使用
<div id="app"> <h3>自定義下拉框</h3> <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>
局部注冊的組件,只有在當(dāng)前實(shí)例的作用域中才可以使用,在作用域中也可以復(fù)用,效果如下。
組件.png
父子組件間通信
父組件給子組件通信
父組件===》子組件(用props)
組件實(shí)例的作用域是孤立的,不能再子組件直接用父組件的數(shù)據(jù)。
可以在組件上使用自定義屬性綁定數(shù)據(jù),在組件中組要顯示的用props生命自定義屬性名。
也就是記住一句話,父組件給子組件傳值得時候,就是調(diào)用組件時給組件添加 一個屬性,然后在組件內(nèi)用props接收即可,組件內(nèi)根據(jù)屬性名即可使用。
<div id="app"> <h3>自定義下拉框</h3> <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>
頁面效果
props傳值.png
子組件給父組件通信
子組件===》父組件
需要用到自定義時間,父組件用$on監(jiān)聽自定義事件,$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ā)子組件事件的時候,$emit 通知父組件 this.$emit("receive",item);
4、父組件根據(jù)自定義事件進(jìn)行相應(yīng)反饋changeValue:function(value){this.val = value;}
看如下案例,點(diǎn)擊input的時候,出現(xiàn)下拉列表框,選中相應(yīng)的列表,列表內(nèi)容出現(xiàn)在input框中。
<div id="app"> <h3>自定義下拉框</h3> <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"> // 全局注冊組件 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:['宋仲基','余文樂','鹿晗','陳小春','黃曉明','易烊千璽'] } }) </script>
組件最基本的應(yīng)用就是如此,深入的應(yīng)用,就會發(fā)現(xiàn)很多剛好玩的東西。
關(guān)于“Vue組件及父子組件通信的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
文章題目:Vue組件及父子組件通信的示例分析
文章路徑:http://bm7419.com/article24/goesce.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站制作、ChatGPT、微信小程序、網(wǎng)站導(dǎo)航、域名注冊、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)