VUE彈窗的兩種實現方式

方法一 使用.sync修飾符

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

    父組件：

1.  
   <template>
2.  
   <div id="demo">
3.  
   <test-model :show.sync="showFlag"></test-model>
4.  
    
5.  
   </div>
6.  
   </template>
7.  
   <script>
8.  
   import testModel from 'src/components/testModel'
9.  
   export default {
10.  
    data(){
11.  
    return{
12.  
    showFlag: false
13.  
    }
14.  
    },
15.  
    components: {
16.  
    testModel,
17.  
    }
18.  
    }
19.  
    </script>
20.  
     
21.  
    <style lang="scss" scoped>
22.  
    </style>

    子組件：

1.  
   <template>
2.  
   <div v-if="show">
3.  
   <button @click="closeShow"></button>
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
    
8.  
   export default {
9.  
   data(){
10.  
    return{
11.  
    }
12.  
    },
13.  
    props: ["show"],
14.  
    methods: {
15.  
    closeShow() {
16.  
    this.$emit("update:show",false);
17.  
    }
18.  
    },
19.  
    }
20.  
    </script>
21.  
    <style lang="scss" scoped>
22.  
    </style>

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

 

方法二  使用v-model

父組件

1.  
   <template>
2.  
   <div id="demo">
3.  
   <test-model v-model="show"></test-model>
4.  
    
5.  
   </div>
6.  
   </template>
7.  
   <script>
8.  
   import testModel from 'src/components/testModel'
9.  
   export default {
10.  
    data(){
11.  
    return{
12.  
    show: false
13.  
    }
14.  
    },
15.  
    components: {
16.  
    testModel,
17.  
    }
18.  
    }
19.  
    </script>
20.  
     
21.  
    <style lang="scss" scoped>
22.  
    </style>

子組件

1.  
   <template>
2.  
   <div v-if="value">
3.  
   <button @click="closeShow"></button>
4.  
   </div>
5.  
   </template>
6.  
   <script>
7.  
    
8.  
   export default {
9.  
   data(){
10.  
    return{
11.  
    }
12.  
    },
13.  
    props: ["value"],
14.  
    model: {
15.  
    prop: 'value',
16.  
    event: 'balabala'
17.  
    },
18.  
    methods: {
19.  
    changeShow() {
20.  
    this.$emit("balabala",false);
21.  
    }
22.  
    },
23.  
    }
24.  
    </script>
25.  
    <style lang="scss" scoped>
26.  
    </style>

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