Vue组件之实现自定义事件

<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>

<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>