current position:Home>Vue + elementui learning notes, use custom events to monitor the closing and opening events of the pop-up window of the introduced component

Vue + elementui learning notes, use custom events to monitor the closing and opening events of the pop-up window of the introduced component

2022-05-15 03:49:57Iron pot, catch it

demand : When introducing a component pop-up, you want to get the closing event , And process the data

Edit bullet frame assembly :

<template>
<[email protected] yes elementUI The closure of --->
    <el-dialog title=" Notice of news " :visible.sync="newsDialog" @close="newsClose">
        <div slot="header" class="el-dialog__header">123456</div>
        <div slot="contain">
            <el-row>
                <el-col :span="10"> menu </el-col>
                <el-col :span="14">
                    <el-tabs>
                        <el-tabs-span>1123</el-tabs-span>
                        <el-tabs-span>6554646</el-tabs-span>
                    </el-tabs>
                </el-col>
            </el-row>
        </div>
    </el-dialog>
</template>
<script>

    export default{
        props:{
            newsTips:Boolean
        },
        data(){
            return{
                newsDialog:false,
            }
        },
        watch: {
            newsTips: function(newval) {
                this.newsDialog = newval
            }
        },
        methods:{// there this.$emit('newsclose'); Is used when executing the parent component call @newsclose Custom events 
            newsClose:function(){
                this.$emit("newsclose");
            }
        }
    }

</script>

Parent component import :

<template>
    <!--  Message pop-up  -->
    <div>
        <a class="right-menu-item" @click="newsTips"><i class="el-icon-chat-dot-round"></i></a>
        <[email protected]  Must be associated with the sub component this.$emit('newsclose') equally ---->
        <HomeNews :newsTips="newsVisable" @newsclose="newsTipsClose"></HomeNews>
    </div>
    
</template>
<script>
    // Import components 
    import HomeNews from '@/components/homeNews';
    export defualt{
  components: {
    HomeNews
  },

  data: function() {
    return {
      newsVisable:false
    }
  },
  methods: {
    // Message pop-up 
    newsTips:function(){
      this.newsVisable = true;
    },
    newsTipsClose:function(){
      this.newsVisable = false;
    },
  }
    }
</script>

copyright notice
author[Iron pot, catch it],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/131/202205111511001630.html

Random recommended