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.