UI組件是開發工作中經常用到的東西，可復用的UI元素在不同的應用場景中使用具有非常大的優勢，Vue.js是一個非常流行的JavaScript框架，它能夠幫助我們構建可復用的UI組件。

在Vue.js中封裝UI組件時，有幾個基本的要素：

Vue.component("my-component", {
// options...
});

首先，我們需要在Vue.js中注冊一個組件，可以使用Vue.component()函數。這個函數需要兩個參數，第一個參數是組件的名稱，第二個參數是一個對象，其中定義了組件的選項。

Vue.component('my-component', {
template: '
{{ title }}
{{ description }}
',
props: {
title: String,
description: String
}
});

在這個例子中，我們定義了一個叫做“my-component”的組件。這個組件在模板中包含了一個標題（title）和一個描述（description），它們作為組件的props傳遞進來。props是一種Vue中父子組件通信的機制，父組件可以把數據通過props傳遞給子組件，讓子組件使用。

當我們在應用中使用該組件時，我們可以通過傳遞props來告訴組件要顯示哪個標題和描述。我們只需要像這樣在Vue模板中使用它：

Vue.component("my-component", {
template: '
{{ text }}
',
props: ['text'],
methods: {
onClick: function() {
this.$emit("clicked");
}
}
});

除了定義模板和props，Vue組件還可以有自己的方法。在上面的例子中，我們定義了一個按鈕點擊事件的方法，該方法通過$emit()函數觸發了一個自定義事件“clicked”。這個自定義事件可以被父組件捕獲，從而實現父子組件之間的通信。

父組件可以通過v-on指令監聽my-component組件觸發的clicked事件，并在doSomething()方法中處理相應邏輯。在Vue.js中實現組件化開發，可以大大提高代碼復用性，降低開發成本，讓應用程序更加簡潔易懂。