Vue component implements custom events

Custom events are essentially transferred from the parent component sub-assemblies

1, sub-components, trigger click click event, by $ emit (...) the triggering event defclick parent component in the custom

<template>
    <div role="alert" :class="['el-alert',changeAlert,'is-center','is-light']">
        <i :class="['el-alert__icon',changeIcon]"></i>
        <div class="el-alert__content">
            <slot name="title">
                <span class="el-alert__title">{{title}}</span>
            </slot>
            <i class="el-alert__closebtn el-icon-close" @click="clickHandle"></i>
        </div>
    </div>
</template>

<script>
export default {
    methods:{
        clickHandle(){
            this.$emit('defclick');
        }
    }
}
</script>

2, parent component, receiving information from the sub-assembly

<template>
  <div id="app">
    <alert type="success" title="这是一段成功提示的信息" @defclick='clickHandle' />
    <alert @defclick="clickHandle" />
  </div>
</template>

<script>
import alert from '@/components/alert'

export default {
  name: 'App',
  components: {
    alert
  },
  methods: {
    clickHandle() {
      console.log('test')
    }
  }
}
</script>