第5章 Vue組件電子課件_第1頁(yè)
第5章 Vue組件電子課件_第2頁(yè)
第5章 Vue組件電子課件_第3頁(yè)
第5章 Vue組件電子課件_第4頁(yè)
第5章 Vue組件電子課件_第5頁(yè)
已閱讀5頁(yè)，還剩14頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第5章Vue組件課程內(nèi)容

組件的基本使用

Vue組件嵌套

父組件向子組件通信

子組件向父組件通信

任意組件及平行組件通信創(chuàng)建組件并發(fā)布2

什么是組件組件(Component)是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。在大型的應(yīng)用中為了分工、代碼復(fù)用、提高維護(hù)性不可避免地需要將應(yīng)用抽象為多個(gè)相對(duì)獨(dú)立的模塊。34【例5-1】體驗(yàn)自定義組件<body><divid="app"><!--3.#app是Vue實(shí)例掛載的元素，應(yīng)該在掛載元素范圍內(nèi)使用組件--><my-component></my-component></div></body><scriptsrc="js/Vue.js"></script><script>varmyComponent=Vue.extend({//1.創(chuàng)建一個(gè)組件構(gòu)造器template:'<div>歡迎來(lái)到斤斗云在線教育云平臺(tái)</div>'})//2.注冊(cè)組件，并指定組件的標(biāo)簽，組件的HTML標(biāo)簽為<my-component>Vponent('my-component',myComponent);newVue({el:'#app'});</script></html>組件使用Vue.js的組件使用有三個(gè)步驟，具體步驟如下：51.調(diào)用Vue.extend()方法創(chuàng)建組件構(gòu)造器varMyComponent=Vue.extend({//選項(xiàng)})2.調(diào)用Vponent()方法注冊(cè)組件。Vponent('my-component',MyComponent)3.在Vue實(shí)例的作用范圍使用組件。<divid="app"><my-component></my-component></div>組件中的data必須是函數(shù)Vue組件中data選項(xiàng)為什么必須是函數(shù)？因?yàn)橐粋€(gè)組件可以在多處復(fù)用，如果data是一個(gè)對(duì)象，那么所有復(fù)用的組件實(shí)例將都顯示相同內(nèi)容，如此就限制了組件復(fù)用的意義。構(gòu)造Vue實(shí)例時(shí)傳入的各種選項(xiàng)大多數(shù)都可以在組件里使用。只有一個(gè)例外：data必須是函數(shù)。<script>vardata={counter:0}Vponent('error-counter',{template:'<buttonv-on:click="counter+=1">{{counter}}</button>',

data:function(){returndata;}})Vponent('right-counter',{template:'<buttonv-on:click="counter+=1">{{counter}}</button>',//返回局部counterdata:function(){return{counter:0}}})

varapp=newVue({el:'#app'})</script>

7【例5-5】演示組件中的data必須是函數(shù)<!DOCTYPEhtml><html><metacharset="UTF-8"><title>組件系統(tǒng)</title><body><scriptsrc="../js/Vue.js"></script><divid="app"><my-component></my-component></div><script>Vponent('my-component',{template:'<div>{{msg}}</div>',data:{msg:'Vue.js'}})newVue({el:'#app'})</script></body></html>結(jié)果發(fā)現(xiàn)Vue會(huì)停止運(yùn)行，并在控制臺(tái)發(fā)出警告，如圖,提示組件實(shí)例中data必須是一個(gè)函數(shù)Vue兩大核心思想組件化數(shù)據(jù)驅(qū)動(dòng)組件本身也可以包含組件8Vue組件嵌套varChild=Vue.extend({template:'<div>我是子組件!</div>'});varParent=Vue.extend({template:'<div>我是父組件<child-component></child-component></div>',components:{'child-component':Child}});Vponent("parent-component",Parent);需要注意的是從Vue2.0開(kāi)始，每個(gè)組件必須只有一個(gè)根元素。不再允許片段實(shí)例。

使用props組件實(shí)例的作用域是孤立的。這意味著不能并且不應(yīng)該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。通?？梢允褂胮rops把數(shù)據(jù)傳給子組件【例5-9】動(dòng)態(tài)Prop向子組件動(dòng)態(tài)傳遞數(shù)據(jù)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>hello,world!</title></head><body><scriptsrc="../js/Vue.js"></script><h1>動(dòng)態(tài)Prop向子組件動(dòng)態(tài)傳遞數(shù)據(jù)</h1><divid="app-7">輸入信息：<inputtype="text"v-model="msg"><childv-bind:message="msg"v-bind:name="person"ref="child1"></child></div><script>Vponent('child',{

props:['message','name'],template:'<span>{{message}}發(fā)送者：{{name}}</span>'})//初始化根實(shí)例

varapp7=newVue({el:'#app-7',data:{msg:'hello',person:'樂(lè)美無(wú)限'}})</script></body></html>使用props把數(shù)據(jù)傳給子組件還有一種形式，也就是v-bind綁定HTML特性到一個(gè)表達(dá)式，可以用v-bind動(dòng)態(tài)綁定props的值到父組件的數(shù)據(jù)中。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，該變化也會(huì)傳導(dǎo)給子組件，使用v-model動(dòng)態(tài)Prop向組件動(dòng)態(tài)傳遞數(shù)據(jù)?！纠?-10】演示props驗(yàn)證<body><divid="app"><childv-bind:message="message"></child></div><scripttype="text/javascript"src="../js/Vue.js"></script><scripttype="text/javascript">varchild={props:{message:Number},template:'<div>{{message}}</div>'};varvm=newVue({components:{'child':child},el:'#app',data:{message:123}});</script></body>使用Slot插槽內(nèi)容分發(fā)單Slot插槽默認(rèn)父組件在子組件內(nèi)套的內(nèi)容是不顯示的。除非子組件模板包換至少一個(gè)<slot>插口，否則父組件的內(nèi)容將會(huì)被丟棄。Slot插槽為父組件提供了安插內(nèi)容到子組件中的方法單Slot插槽具名Slot插槽Slot作用域插槽。<divid="app"><children><!--span這行不會(huì)顯示--><span>注冊(cè)成功</span></children></div><script>varvm=newVue({el:'#app',components:{children:{template:"<button>這是子組件</button>"}}});</script>

<divid="app"><children><span>注冊(cè)成功</span></children></div><script>varvm=newVue({el:'#app',components:{children:{template:"<div><slot><p>默認(rèn)效果</p></slot><button>這是子組件</button></div>"}}});</script>

具名Slot插槽如果有多個(gè)標(biāo)簽，可以使用具名插槽<my-component><h1slot=”header”>頁(yè)面標(biāo)題</h1><p>主要內(nèi)容的一個(gè)段落</p><p>另一個(gè)主要段落</p><divslot=”footer”><address>這里是一些聯(lián)系信息</address></div></my-component><script>Vponent('my-component',{template:`<divclass="container"><header><slotname="header"></slot></header><main><slot></slot></main><footer><slotname="footer"></slot></footer></div>`})//初始化根實(shí)例

varapp7=newVue({el:'#app-7'})</script>Slot作用域插槽<divid="app-7"><my-component><templatescope="myProps"><span>這里是父組件傳入的信息！</span><span>這里是父組件從子組件接收到的數(shù)據(jù)，{{myProps.text}}，格式化后再分發(fā)給插槽。</span></template></my-component></div><script>Vponent('my-component',{template:`<divclass="container"><slottext="hellofromchild"></slot></div>`})//初始化根實(shí)例

varapp7=newVue({el:'#app-7'})</script>這里是父組件從子組件接收到的數(shù)據(jù)，{{myProps.text}}，格式化后再分發(fā)給插槽通過(guò){{myProps.text}}就可以調(diào)用組件模板中的<slottext="hellofromchild"></slot>綁定的數(shù)據(jù)，所以作用域插槽是一種子向父?jìng)鲄⒌姆绞?/p>

組件通信組件間的通信主要有4種Vue組件通信方式父子組件的通信非父子組件的eventBus通信利用本地緩存實(shí)現(xiàn)組件通信Vuex通信父組件向子組件通信傳遞數(shù)據(jù)Props（默認(rèn)是單向綁定）$parent1、使用props屬性父組件向子組件傳值可以使用如下代碼：

<child-componentv-bind:子組件屬性="父組件數(shù)據(jù)屬性"></child-component>2、通過(guò)$parent直接在子組件中通過(guò)this.$parent的到調(diào)用其父組件，但并不建議使用子組件向父組件通信使用自定義事件

在父組件中調(diào)用子組建的時(shí)候，綁定一個(gè)自定義事件和對(duì)應(yīng)的處理函數(shù)。

在templete里應(yīng)用子組件時(shí),定義事件changeMsg<counter@changeMsgEvent="changeMsg"></counter>//

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論