在Vue中，我們可以很方便地使用現成的組件，但是當我們需要定制一個不太常見的組件時，可能需要自行編寫代碼，而今天我們就來講解如何自己寫一個圓角組件。

首先，在Vue中，我們可以使用props來給組件傳遞參數，并在組件內部使用這些參數。我們的圓角組件需要一個半徑參數，因此我們先在組件中寫入如下代碼：

Vue.component('rounded', {
props: {
radius: Number
}
// 組件其它代碼
})

接下來，我們需要在組件中使用這個radius參數來進行圓角樣式的設置。我們可以使用CSS3的border-radius屬性來設置圓角半徑，而這個屬性接受像素值或百分比值。因此我們需要根據傳入的參數與實際需要計算出正確的值。

Vue.component('rounded', {
props: {
radius: Number
},
computed: {
styleObj: function() {
var r = this.radius;
return {
'border-radius': r + 'px / ' + r*2 + 'px'
}
}
},
template: '<div :style="styleObj"><slot></slot></div>'
})

在上述代碼中，我們定義了一個computed屬性styleObj來計算樣式對象，這個對象中設置了border-radius屬性，并使用計算后的值，然后在組件模板中應用了這個樣式對象，并使用了Vue的slot插槽來保留組件內部的內容。

最后，在我們的Vue應用中就可以使用這個圓角組件了，例如：

<rounded radius="30">這是一段文字</rounded>

這個組件會將內部包含的文字或其它內容圓角化處理，并圓角半徑為30像素。如果需要使用百分比的半徑值，只需要稍微修改計算代碼即可。