Vue 組件是構成 Vue 應用程序的基本構建塊之一。組件是面向對象編程的體現,它將一些相關的功能打包成一個可復用的代碼塊,可以在應用程序中多次使用。
組件可以包含若干個元素,并可以包含其他組件。組件是由 Vue 實例擴展而來,因此它繼承了所有的 Vue 原生特性。
組件可以使用 Vue.extend() 方法來擴展 Vue 實例,也可以使用 Vue.component() 方法注冊全局組件。這樣,我們就可以在 Vue 應用中使用該組件。
Vue.component('my-component', { template: 'A custom component!' }) new Vue({ el: '#app' })
上述代碼中,我們使用 Vue.component() 方法注冊了一個名為 my-component 的全局組件,該組件的模板包含了一個 div 元素。然后,我們創建了一個 Vue 實例并將其掛載在 id 名為 app 的 DOM 元素上。
接著,我們就可以在 HTML 中使用 my-component 組件了。需要注意的是,組件的名稱必須使用中橫線連接。
以上代碼中,我們在 Vue 實例掛載的 div 元素中使用了 my-component 組件。這時,my-component 組件會渲染為一個包含 “A custom component!” 文本的 div 元素,并會被插入到 #app 元素內。
Vue 組件具有良好的封裝性和可復用性,可以幫助我們更好地組織應用程序。因此,在開發 Vue 應用時,合理地使用組件可以提高應用的開發效率和維護性。