vue + elementUI学习小笔记,使用自定义事件监听引入组件弹窗的关闭和开启事件

需求：在引入组件弹框时想获取关闭事件，并对数据做出处理

编写弹框组件:

<template>
<!---@close是elementUI的关闭事件--->
    <el-dialog title="消息通知" :visible.sync="newsDialog" @close="newsClose">
        <div slot="header" class="el-dialog__header">123456</div>
        <div slot="contain">
            <el-row>
                <el-col :span="10">菜单</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:{//这里的this.$emit('newsclose');是执行父组件调用时使用的@newsclose自定义事件
            newsClose:function(){
                this.$emit("newsclose");
            }
        }
    }

</script>

父组件引入：

<template>
    <!-- 消息弹框 -->
    <div>
        <a class="right-menu-item" @click="newsTips"><i class="el-icon-chat-dot-round"></i></a>
        <!----@newsclose 必须与子组件的this.$emit('newsclose')一样---->
        <HomeNews :newsTips="newsVisable" @newsclose="newsTipsClose"></HomeNews>
    </div>
    
</template>
<script>
    //引入组件
    import HomeNews from '@/components/homeNews';
    export defualt{
  components: {
    HomeNews
  },

  data: function() {
    return {
      newsVisable:false
    }
  },
  methods: {
    //消息弹出框
    newsTips:function(){
      this.newsVisable = true;
    },
    newsTipsClose:function(){
      this.newsVisable = false;
    },
  }
    }
</script>