Vue彈窗的兩種實現方式範例詳解

2022-08-05 18:00:13

方法一使用.sync修飾符

element就是使用的這種方式，實現方式如下：

父元件：

<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的事件，但是像單選框、核取方塊等型別的輸入控制元件可能會將value特性用於不同的目的。model選項可以用來避免這樣的衝突，所以上面的子元件裡，我們用balabala來替換掉了原本的input事件，所以在$emit的時候，裡面的事件名應為balabala，否則預設為input.

到此這篇關於Vue彈窗的兩種實現方式的文章就介紹到這了,更多相關vue彈窗實現內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue彈窗的兩種實現方式範例詳解

目錄

方法一使用.sync修飾符

方法二使用v-model

熱門文章

Vue彈窗的兩種實現方式範例詳解

目錄

方法一 使用.sync修飾符

方法二 使用v-model

熱門文章

方法一使用.sync修飾符

方法二使用v-model