欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue之自定義事件內(nèi)容分發(fā)詳解

 更新時(shí)間:2021年11月18日 09:58:42   作者:咸魚_翻身  
這篇文章主要為大家介紹了Vue的自定義事件內(nèi)容分發(fā),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助

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

    這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-01-01
  • swiper/vue 獲取 swiper實(shí)例方法詳解

    swiper/vue 獲取 swiper實(shí)例方法詳解

    在網(wǎng)上搜了一下如何調(diào)用swiper實(shí)例,大部分都是通過 swiperRef = new Swiper(‘.swiper’, options) 這種方法初始化swiper,然后直接能用 swiperRef 實(shí)例,這篇文章主要介紹了swiper/vue 獲取 swiper實(shí)例方法詳解,需要的朋友可以參考下
    2023-12-12
  • vue實(shí)現(xiàn)頁面打印自動(dòng)分頁的兩種方法

    vue實(shí)現(xiàn)頁面打印自動(dòng)分頁的兩種方法

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面打印自動(dòng)分頁的兩種方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue如何實(shí)現(xiàn)iframe的上一步、下一步操作

    Vue如何實(shí)現(xiàn)iframe的上一步、下一步操作

    這篇文章主要介紹了Vue如何實(shí)現(xiàn)iframe的上一步、下一步操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue中v-cloak的作用和原理解析

    vue中v-cloak的作用和原理解析

    v-cloak原理是先通過樣式隱藏內(nèi)容,然后在內(nèi)存中進(jìn)行值的替換,將替換的內(nèi)容再反饋給界面,數(shù)據(jù)渲染完場之后,v-cloak 屬性會(huì)被自動(dòng)去除,本文詳細(xì)介紹vue中v-cloak的作用和原理解析,感興趣的朋友一起看看吧
    2023-09-09
  • 解決vue中虛擬dom,無法實(shí)時(shí)更新的問題

    解決vue中虛擬dom,無法實(shí)時(shí)更新的問題

    今天小編就為大家分享一篇解決vue中虛擬dom,無法實(shí)時(shí)更新的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue實(shí)現(xiàn)table列表項(xiàng)上下移動(dòng)的示例代碼

    Vue實(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-04
  • Vue filter 過濾當(dāng)前時(shí)間 實(shí)現(xiàn)實(shí)時(shí)更新效果

    Vue filter 過濾當(dāng)前時(shí)間 實(shí)現(xiàn)實(shí)時(shí)更新效果

    這篇文章主要介紹了Vue filter 過濾當(dāng)前時(shí)間 實(shí)現(xiàn)實(shí)時(shí)更新效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-12-12
  • Vue聲明式渲染詳解

    Vue聲明式渲染詳解

    這篇文章主要介紹了Vue聲明式渲染詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-05-05
  • Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù)

    Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù)

    這篇文章主要介紹了Vue手把手教你擼一個(gè) beforeEnter 鉤子函數(shù),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-04-04

最新評(píng)論