在Vue中，我們可以使用v-on指令來綁定一個事件處理函數，以達到刪除當前組件的效果。

首先，需要在組件中定義一個方法，用于刪除當前組件。該方法需要在組件被渲染時，綁定到一個按鈕或其他元素的點擊事件上。例如：

Vue.component('my-component', {
template: `
<div>
<p>這是一個組件</p>
<button v-on:click="deleteComponent">刪除組件</button>
</div>
`,
methods: {
deleteComponent: function () {
// 在這里使用Vue的API，將當前組件從DOM中移除
}
}
})

在這個例子中，當用戶點擊“刪除組件”按鈕時，deleteComponent方法會被調用。但是，我們還缺少一些實現方法，以使用Vue的API從DOM中刪除當前組件。

為了實現這一點，我們需要在組件被渲染時，使用Vue提供的$mount()方法。該方法可以傳入一個DOM元素，并將組件掛載在該元素上。在此之后，我們可以使用Vue實例的$destroy()方法，將組件卸載并從DOM中移除。為了方便使用，我們可以將組件的Vue實例存儲在組件的data中，并在deleteComponent方法中使用它。

Vue.component('my-component', {
template: `
<div>
<p>這是一個組件</p>
<button v-on:click="deleteComponent">刪除組件</button>
</div>
`,
data: function () {
return {
vm: null
}
},
mounted: function () {
this.vm = new Vue({
render: function (createElement) {
return createElement('div', this.$slots.default)
}
})
this.vm.$mount()
this.$el.appendChild(this.vm.$el)
},
methods: {
deleteComponent: function () {
this.vm.$destroy()
this.vm.$el.parentNode.removeChild(this.vm.$el)
}
}
})

在這個例子中，我們首先定義了一個data屬性，用于存儲組件的Vue實例。

在mounted鉤子中，我們創建了該Vue實例，并將該實例掛載到組件的DOM元素上（this.$el）。我們使用了Vue的createElement方法來渲染默認插槽內容（this.$slots.default），并將其作為div元素返回。

在deleteComponent方法中，我們先調用了該Vue實例的$destroy()方法，以執行清理操作。然后，我們使用JavaScript原生API，從DOM中移除該Vue實例的根元素。

這樣，用戶在點擊“刪除組件”按鈕時，就可以實現立即刪除當前組件的效果了。