本文實(shí)例為大家分享了vue綜合組件間的通信,供大家參考,具體內(nèi)容如下
成都創(chuàng)新互聯(lián)長期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為衛(wèi)濱企業(yè)提供專業(yè)的成都網(wǎng)站制作、做網(wǎng)站,衛(wèi)濱網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
實(shí)現(xiàn)一個(gè)ToDoList。
①完成所有的組件的創(chuàng)建和使用
②add
點(diǎn)擊add按鈕時(shí)候,將用戶輸入的內(nèi)容(todoinput),顯示在(todolist)
核心代碼:兄弟組件間通信
步驟1:var bus = new Vue()
步驟2:在準(zhǔn)備接受數(shù)據(jù)的組件
bus.$on('addEvent',function(){ })
步驟3:觸發(fā)事件
bus.$emit('addEvent',123)
將todolist中數(shù)組的元素 渲染在todoitem的每一個(gè)span標(biāo)簽。(父子組件通信)
③delete
在todoitem中點(diǎn)擊delete按鈕時(shí),將該todoitem刪除,由于todoitem的數(shù)量 取決于 todolist中數(shù)組
子組件 和 父組件通信:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/vue-resource.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <todobox></todobox> </div> <script> <!--兄弟間通信--> var bus = new Vue(); // input組件 Vue.component("todoinput",{ // 保存用戶輸入的數(shù)據(jù) data:function(){ return{ userInput:"" } }, methods:{ sendInput:function(){ // 觸發(fā)自定義事件,將this.userInput這個(gè)傳遞到todolist bus.$emit("addEvent",this.userInput); this.userInput = ""; } }, template: ` <div> <h2>待做事項(xiàng)</h2> <input type="text" placeholder="健身" v-model="userInput"/> <button @click="sendInput">Add</button> </div> ` }) // 列表組件 Vue.component("todolist",{ // 保存?zhèn)鬟f來的用戶輸入的數(shù)據(jù) data:function(){ return{ inputList:[] } }, beforeMount:function(){ // 觸發(fā)綁定 // msg就是事件觸發(fā)后傳遞過來的數(shù)據(jù) //var that = this; bus.$on("addEvent",(msg)=>{ // 保存到數(shù)組inputList中 this.inputList.push (msg) ; }) }, template: ` <div> <ul> <todoitem v-bind:content="tmp" v-for="(tmp,index) in inputList" v-bind:key="index" v-bind:myIndex="index"></todoitem> </ul> </div> ` // 出現(xiàn)警告,加下標(biāo),提高列表渲染 }) // item組件 Vue.component("todoitem",{ // props子組件獲取父組件的數(shù)據(jù),將todolist中的內(nèi)容以及內(nèi)容的下標(biāo)獲取 props:["content","myIndex"], methods:{ // 通過下標(biāo)刪除 deleteList:function(){ this.$parent.inputList.splice(this.myIndex,1); } }, template: ` <div> <li> <button @click="deleteList">delete</button> <span>{{content}}</span> </li> </div> ` }) //根組件 Vue.component("todobox",{ template:` <div> <todoinput></todoinput> <todolist></todolist> </div> ` }) new Vue({ el: "#container", data: { msg: "Hello Vue" } }) </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
新聞標(biāo)題:vue綜合組件間的通信詳解
本文地址:http://bm7419.com/article32/gosspc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供、靜態(tài)網(wǎng)站、建站公司、微信小程序、微信公眾號、面包屑導(dǎo)航
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)