可持久化資料結構
阿新 • • 發佈:2022-05-10
元件(Component)是Vue.js最強大的功能之一。元件可以擴充套件HTML元素,封裝可重用的程式碼。根據專案需求,抽象出一些元件,每個元件裡包含了展現、功能和樣式。每個頁面,根據自己所需,使用不同的元件來拼接頁面。這種開發模式使前端頁面易於擴充套件,且靈活性高,而且元件之間也實現瞭解耦。本文將詳細介紹Vue元件基礎用法
概述
在 Vue 裡,一個元件本質上是一個擁有預定義選項的一個 Vue 例項
元件是一個自定義元素或稱為一個模組,包括所需的模板、邏輯和樣式。在HTML模板中,元件以一個自定義標籤的形式存在,起到佔位符的功能。通過Vue.js的宣告式渲染後,佔位符將會被替換為實際的內容
下面是一個最簡單的模組示例
<div id="app"> <xiaohuochai></xiaohuochai> </d
註冊元件
元件註冊包括全域性註冊和區域性註冊兩種
【全域性註冊】
要註冊一個全域性元件,可以使用 Vue.component(tagName, options)
Vue.component('my-component', { // 選項 })
元件在註冊之後,便可以在父例項的模組中以自定義元素 <my-component></my-component>
的形式使用
[注意]要確保在初始化根例項之前註冊了元件
<div id="example"> <my-component></my-component> </div>
<script> // 註冊 Vue.component('my-component', { template: '<div>A custom component!</div>' }) // 建立根例項 new Vue({ el: '#example' }) </script>
data資料
一般地,我們在Vue例項物件或Vue元件物件中,我們通過data來傳遞資料
<div id="example"> <my-component></my-component> <my-component></my-component> <my-component></my-component> </div>
<script> // 註冊 Vue.component('my-component', { template: '<div>{{message}}</div>', data:{ message: 'hello' } }) // 建立根例項 new Vue({ el: '#example' }) </script>
執行上面的程式碼,會使Vue停止執行,並在控制檯發出錯誤提示,告訴你在元件中 data
必須是一個函式