在Vue中，我們可以定義公用組件來方便我們在不同的頁面中使用相同的UI組件。定義公用組件的步驟如下：

// 定義一個Button組件
Vue.component('my-button', {
template: '{{ text }}',
props: {
text: String
}
})

上面的代碼定義了一個名為my-button的Vue組件。它包含一個template屬性，用來定義組件的HTML模板。這里我們用一個標簽來渲染按鈕，并且通過雙花括號{{ text }}形式插值渲染props中的text屬性。Props用來傳遞數(shù)據(jù)到子組件，這里我們定義了一個名為text的屬性，它的類型為字符串。

通過定義公用組件，我們可以在任何Vue實例中引用它。例如：

// 創(chuàng)建一個帶有Button組件的Vue實例
new Vue({
el: '#app',
data: {
buttonText: 'Click me!'
},
template: '
'
})

上面的代碼創(chuàng)建了一個Vue實例，并將它掛載到一個DOM元素上，這里我們用的是id為“app”的元素。我們創(chuàng)建了一個名為buttonText的數(shù)據(jù)屬性，并將“Click me!”賦值給它。接著我們指定組件模板中的text屬性來引用這個數(shù)據(jù)屬性，并通過v-bind指令將它傳遞給組件：

現(xiàn)在我們就可以在頁面中看到一個帶有文本“Click me!”的按鈕了。這個按鈕是通過引用我們定義的公用組件my-button來創(chuàng)建的，并且有一個text屬性來控制它的文本內(nèi)容。我們還可以通過傳遞不同的props來創(chuàng)建不同的按鈕實例：

// 創(chuàng)建一個帶有不同文本的Button組件實例
new Vue({
el: '#app',
template: `
`
})

總結一下，通過定義公用組件，我們可以方便地在不同的頁面中使用相同的UI組件，減少代碼重復度。Vue中定義公用組件的步驟包括：定義一個Vue.component，指定template屬性來定義組件的HTML模板并插值渲染props中的屬性，然后在Vue實例或其他Vue組件中引用它并傳遞不同的props。