閱讀時間預估:2分鐘
啥是元件?
元件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可複用的元件構建大型應用。仔細想想，幾乎任意型別的應用介面都可以抽象為一個元件樹,舉個例子,就像小時候玩的積木一樣,想要一個好玩的玩具那麼就動手一個元件一個元件的拼接吧.
- 建立元件的兩種方式:1.全域性元件 2.區域性元件
全域性元件
- 說明：全域性元件在所有的vue例項中都可以使用
- 注意：先註冊元件，再初始化根例項
// 1 註冊全域性元件
Vue.component('my-component', {
// template 只能有一個根元素
template: '<p>A custom component!</p>',
// 元件中的 `data` 必須是函式 並且函式的返回值必須是物件
data() {
return {
msg: '注意：元件的data必須是一個函式！！！'
}
}
})
// 2 使用：以自定義元素的方式
<div id="example">
<my-component></my-component>
</div>
// =====> 渲染結果
<div id="example">
<p>A custom component!</p>
</div>
// 3 template屬性的值可以是：
- 1 模板字串
- 2 模板id template: '#tpl'
<script type="text/x-template" id="tpl">
<p>A custom component!</p>
</script>
複製程式碼- extend：使用基礎 Vue 構造器，建立一個“子類”。引數是一個包含元件選項的物件。
// 註冊元件，傳入一個擴充套件過的構造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 註冊元件，傳入一個選項物件 (自動呼叫 Vue.extend)
Vue.component('my-component', { /* ... */ })
var Home = Vue.extend({
template: '',
data() {}
})
Vue.component('home', Home)
複製程式碼區域性元件
- 說明：區域性元件，是在某一個具體的vue例項中定義的，只能在這個vue例項中使用
var Child = {
template: '<div>A custom component!</div>'
}
new Vue({
// 注意：此處為 components
components: {
// <my-component> 將只在當前vue例項中使用
// my-component 為元件名 值為配置物件
'my-component': {
template: ``,
data () { return { } },
props : []
}
}
})
複製程式碼最後
看完上面的程式碼,對於善於利用腳手架開發的小夥伴來說是不是有一絲絲清涼,平時建立元件可不是這麼寫的,對於使用腳手架開發來說元件就是一個個Vue的例項,建立一個.vue檔案,在需要用到的地方直接引用就OK了,確實是這樣的,那麼大俠,你能否在仔細深入的研究下,腳手架是如何把各個元件關聯起來的呢?先留個懸念,後面會告訴你答案.
如果我的分享對面前的這位大俠有所啟發,請不要吝嗇手中大拇指,以程式設計師最高禮遇點贊✨ 評論加分享的方式鼓勵我持續分享,也歡迎各位大佬勘誤,提出寶貴意見.
關注公眾號回覆:學習 領取前端最新最全學習資料,也可以進群和大佬一起學習交流