快捷導(dǎo)航

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

更新時間：2022年08月05日 14:49:24 作者：異城舊夢丶

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

方法一使用.sync修飾符

element就是使用的這種方式，實現(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>

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

方法二使用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>

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

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

您可能感興趣的文章: