Vue之自定義事件內(nèi)容分發(fā)詳解
1、小伙伴們這個(gè)理解起來有點(diǎn)復(fù)雜,希望仔細(xì)看里面的原理,自己去敲一遍:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <todo> <xian slot="xian" :title="title"></xian> // 建議從后面往前看,理解為遍歷得到的值賦值給v-bind,v-bind的值賦值給props同名的值 // [提醒]v-on:綁定的自定義事件名會(huì)自動(dòng)變成小寫,如果有人事件名用了大寫,下面this.$emit里仍然是大寫,會(huì)綁定不上 <yu slot="yu" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="deleteItems(index)"></yu> // Vue實(shí)例將數(shù)據(jù)和方法與View層綁定,View層在分發(fā)這些數(shù)據(jù)和方法到下面的組件綁定,View相當(dāng)于中轉(zhuǎn)了Vue實(shí)例的數(shù)據(jù)和方法交由組件控制 </todo> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script> Vue.component("todo",{ template: '<div>\ <slot name="xian"></slot>\ <ul>\ <slot name="yu"></slot>\ </ul>\ </div>' }); Vue.component("xian",{ props: ['title'], template: '<div>{{title}}</div>' }); Vue.component("yu",{// props是參數(shù)名,類似于變量名,可以隨便定義,v-bind綁定的是變量,是數(shù)據(jù),是定義的變量 props: ['item','index'], // 只能綁定當(dāng)前組件的方法 template: '<li>{{index}}---->{{item}}<button @click="remove">delete</button></li>', methods: { remove: function (index) { // this.$emit 自定義事件分發(fā) // 【注意】this.$emit('事件名')這個(gè)事件名要使用kebab-case(短橫線命名)方式,不要寫成camelCased (駝峰式); this.$emit('remove',index); } } }); var vm = new Vue({ el: "#app", data: { title: "作者", items: ['咸魚翻身1','咸魚翻身2','咸魚翻身3'] }, methods: { deleteItems: function (index) { console.log("您刪除了"+this.items[index]); this.items.splice(index,1); } } }); </script> </body> </html>
運(yùn)行結(jié)果:
當(dāng)我們點(diǎn)擊刪除就能刪除任意的作者名字,這里我點(diǎn)擊刪除第二個(gè),顯示結(jié)果如下:
2、這里有一個(gè)圖供大家理解:
理解大概是這樣 組件和實(shí)例之間方法不能互調(diào) 而要?jiǎng)h除的節(jié)點(diǎn)屬于實(shí)例的屬性 所以通過事件分發(fā)讓組件中定義的方法轉(zhuǎn)向?qū)嵗卸x的方法 然后刪除節(jié)點(diǎn)
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
教你如何在 Nuxt 3 中使用 wavesurfer.js
這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01swiper/vue 獲取 swiper實(shí)例方法詳解
在網(wǎng)上搜了一下如何調(diào)用swiper實(shí)例,大部分都是通過 swiperRef = new Swiper(‘.swiper’, options) 這種方法初始化swiper,然后直接能用 swiperRef 實(shí)例,這篇文章主要介紹了swiper/vue 獲取 swiper實(shí)例方法詳解,需要的朋友可以參考下2023-12-12vue實(shí)現(xiàn)頁面打印自動(dòng)分頁的兩種方法
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面打印自動(dòng)分頁的兩種方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Vue如何實(shí)現(xiàn)iframe的上一步、下一步操作
這篇文章主要介紹了Vue如何實(shí)現(xiàn)iframe的上一步、下一步操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06解決vue中虛擬dom,無法實(shí)時(shí)更新的問題
今天小編就為大家分享一篇解決vue中虛擬dom,無法實(shí)時(shí)更新的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Vue實(shí)現(xiàn)table列表項(xiàng)上下移動(dòng)的示例代碼
本文主要介紹了Vue實(shí)現(xiàn)table列表項(xiàng)上下移動(dòng)的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04Vue filter 過濾當(dāng)前時(shí)間 實(shí)現(xiàn)實(shí)時(shí)更新效果
這篇文章主要介紹了Vue filter 過濾當(dāng)前時(shí)間 實(shí)現(xiàn)實(shí)時(shí)更新效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù)
這篇文章主要介紹了Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04