快捷導(dǎo)航

Vue彈窗的兩種實(shí)現(xiàn)方式實(shí)例詳解

更新時(shí)間：2022年08月05日 14:49:24 作者：異城舊夢(mèng)丶

這篇文章主要介紹了Vue彈窗的兩種實(shí)現(xiàn)方式,一種使用.sync修飾符另一種使用v-model，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

方法一使用.sync修飾符

element就是使用的這種方式，實(shí)現(xiàn)方式如下：

父組件：

<template>
    <div id="demo">
        <test-model :show.sync="showFlag"></test-model>
        
    </div>
</template>
<script>
    import testModel from 'src/components/testModel'
    export default {
      data(){
            return{
                 showFlag: false
            }
        },
        components: {
            testModel,
        }
    }
</script>
 
<style lang="scss" scoped>
</style>

子組件：

<template>
    <div v-if="show">
        <button @click="closeShow"></button>
    </div>
</template>
<script>
 
    export default {
        data(){
            return{
            }
        },
        props: ["show"],
        methods: {
            closeShow() {
                this.$emit("update:show",false);
            }
        },
    }
</script>
<style lang="scss" scoped>
</style>

子組件通過(guò)this.$emit("update:show",false); 可以直接將父組件傳過(guò)來(lái)的show值改變，從而達(dá)到顯示隱藏的目的。

方法二使用v-model

父組件

 <template>
 <div id="demo">
  <test-model v-model="show"></test-model>
  
</div>
</template>
<script>
    import testModel from 'src/components/testModel'
    export default {
      data(){
            return{
                 show: false
            }
        },
        components: {
            testModel,
        }
    }
</script>
 
<style lang="scss" scoped>
</style>

子組件

<template>
    <div v-if="value">
        <button @click="closeShow"></button>
    </div>
</template>
<script>
 
    export default {
        data(){
            return{
            }
        },
        props: ["value"],
        model: {
            prop: 'value',
            event: 'balabala'
        },
        methods: {
            changeShow() {
                this.$emit("balabala",false);
            }
        },
    }
</script>
<style lang="scss" scoped>
</style>

官方文檔里有寫(xiě)，一個(gè)組件上的v-model默認(rèn)會(huì)利用名為value的 prop 和名為input的事件，但是像單選框、復(fù)選框等類(lèi)型的輸入控件可能會(huì)將value特性用于不同的目的。model選項(xiàng)可以用來(lái)避免這樣的沖突，所以上面的子組件里，我們用balabala來(lái)替換掉了原本的input事件，所以在$emit的時(shí)候，里面的事件名應(yīng)為balabala，否則默認(rèn)為input.

到此這篇關(guān)于Vue彈窗的兩種實(shí)現(xiàn)方式的文章就介紹到這了,更多相關(guān)vue彈窗實(shí)現(xiàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue3+element Plus如何實(shí)現(xiàn)彈框的拖拽、可點(diǎn)擊底層頁(yè)面功能
這篇文章主要介紹了vue3+element Plus如何實(shí)現(xiàn)彈框的拖拽、可點(diǎn)擊底層頁(yè)面功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-11-11
Vue中mixin和extends的使用方法詳解
當(dāng)我們談?wù)揤ue的組件擴(kuò)展時(shí),經(jīng)常會(huì)遇到mixin和extends這兩個(gè)關(guān)鍵詞,它們提供了一種有效的方式來(lái)共享和重用組件邏輯,本文將深入探討Vue中mixin和extends的使用方法,并詳細(xì)探討它們的覆蓋邏輯,以便你在實(shí)際項(xiàng)目中能夠更好地應(yīng)用它們
2023-08-08
聊聊vue集成sweetalert2提示組件的問(wèn)題
這篇文章主要介紹了vue 集成 sweetalert2 提示組件的問(wèn)題，本文通過(guò)項(xiàng)目案例實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2021-11-11
Vue中Axios從遠(yuǎn)程/后臺(tái)讀取數(shù)據(jù)
今天小編就為大家分享一篇關(guān)于Vue中Axios從遠(yuǎn)程/后臺(tái)讀取數(shù)據(jù)，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-01-01
vue中data改變后讓視圖同步更新的方法
這篇文章主要給大家介紹了關(guān)于vue中data改變后讓視圖同步更新的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
vue項(xiàng)目不能使用localhost訪(fǎng)問(wèn)的解決
這篇文章主要介紹了vue項(xiàng)目不能使用localhost訪(fǎng)問(wèn)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
VUE axios上傳圖片到七牛的實(shí)例代碼
本篇文章主要介紹了VUE axios上傳圖片到七牛的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-07-07
antd design table更改某行數(shù)據(jù)的樣式操作
這篇文章主要介紹了antd design table更改某行數(shù)據(jù)的樣式操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
Vue可自定義tab組件用法實(shí)例
在本篇文章里小編給大家分享了關(guān)于Vue可自定義tab組件用法實(shí)例以及相關(guān)知識(shí)點(diǎn)，需要的朋友們參考下。
2019-10-10