Vue組件之實現自定義事件

自定義事件本質是由子組件向父組件傳遞信息

1、子組件，觸發click點擊事件時，通過$emit(...)觸發父組件里自定義的事件defclick

<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、父組件，定義自定義事件defclick對應的處理函數，接收來自子組件的信息

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