資訊專欄INFORMATION COLUMN
摘要：組件結(jié)構(gòu)基礎(chǔ)知識屬性屬性維護一個組件內(nèi)部狀態(tài)，其余組件正常情況下不可見。方案選擇單文件一行的簡單結(jié)構(gòu)常規(guī)的選擇前邊兩種方案解決不了時候的選擇靈活性高注意不論選擇哪一種方案，定義模板時，一定要有一個非標簽元素作根，有且僅有一個。
簡介
組件是可復(fù)用的 Vue 實例。
本質(zhì)上是一個對象，該對象包含data、computed、watch、methods、filters以及生命周期鉤子等成員屬性。
組件結(jié)構(gòu)：
{
data(){
return {
//
}
},
computed:{
displayName(){
return "";
}
},
methods:{
onClickHandler(params){
// do something
}
}
}
基礎(chǔ)知識
data屬性
data屬性維護一個組件內(nèi)部狀態(tài)，其余組件正常情況下不可見。
可以通過props傳遞給子組件；
可以通過$emit的方式傳遞給父組件；
可以通過this.$refs.ref.$data在mounted生命周期內(nèi)獲取子組件的內(nèi)部狀態(tài)；
目前不知道如何監(jiān)聽其變化；
因為計算屬性computed和偵聽屬性watch只能監(jiān)聽 響應(yīng)式依賴 的變化，而$refs非響應(yīng)式。
一個組件的 data 選項必須是一個函數(shù)。
data選項有兩種定義方式：
一、對象形式：
```
data:{
//引用該組件的地方，共用一個狀態(tài)的引用，以至于，只要有一處修改了$data中的某一屬性值，其它引用該組件的地方也跟隨著改變該屬性值（其實，不是跟隨，本來就是同一個指向）。
}
```
二、函數(shù)形式：
```
data(){
return {
//引用該組件的地方，每一個組件都會獲得獨立的引用，互不干擾。
}
}
```
computed屬性 VS methods屬性 VS filter
| 區(qū)別 | method | computed | filter |
|---|---|---|---|
| 類型 | 函數(shù) | 數(shù)據(jù)變量 | 函數(shù) |
| 用途 | 作事件處理函數(shù) | 作數(shù)據(jù) | 作管道符 |
| 作用范圍 | 組建內(nèi) | 組建內(nèi) | 組建內(nèi)（局部注冊）、全局（全局注冊） |
| 參數(shù) | 可以帶參 | 不帶參（非函） | 帶參 |
| 返回值 | 不要求 | 必須有 | 必須有 |
| 觸發(fā) | 交互時觸發(fā) | 在它的相關(guān)依賴發(fā)生改變時才會重新求值 | 傳入的數(shù)據(jù)變化時執(zhí)行 |
注意：
Vue中并不是所有的屬性都是響應(yīng)式的，如$refs無法監(jiān)聽它的變動；
組件構(gòu)建的主要區(qū)別在于模板的生成方式。
模板定義方式 template選項 字符串模板以HTML標簽結(jié)構(gòu)組成的字符串；
示例：
{
template: "簡單示例
",
props: {
level: {
type: Number,
required: true
}
}
}
id選擇器指定的模板
以id標識的一段script標簽包裹的HTML片段；
示例：
{
template: "#anchored-heading-template",
props: {
level: {
type: Number,
required: true
}
}
}
render
發(fā)揮JavaScript最大的編程能力，該函數(shù)接收一個createElement方法作為第一個參數(shù)用來創(chuàng)建VNode；
createElement接收三個參數(shù)：組件根節(jié)點類型、組件配置對象、子節(jié)點（官方關(guān)于組件配置對象的說明）；
示例：
{
render: function (createElement) {
return createElement(
"h" + this.level, // tag name 標簽名稱
this.$slots.default // 子組件中的陣列
)
},
props: {
level: {
type: Number,
required: true
}
}
}
單文件組件
單文件組件將模板、邏輯、樣式在結(jié)構(gòu)上分離，保存在同一個文件中。
方案選擇...
| template | 單文件 | render |
|---|---|---|
| 一行的簡單結(jié)構(gòu) | 常規(guī)的選擇 | 前邊兩種方案解決不了時候的選擇（靈活性高） |
注意：
不論選擇哪一種方案，定義模板時，一定要有一個非template標簽元素作根DOM，有且僅有一個。
組件注冊方式 局部注冊以上幾種方案定義的組件本質(zhì)上都是一個對象，獲取該對象（假設(shè)變量名為TabBar），要求只在另一個組件(假設(shè)變量名為App)內(nèi)使用：
App組件的配置對象：
{
components:{
"tab-bar": TabBar,
}
}
這樣就是局部注冊，該組件TabBar只能在App模板中使用
以上幾種方案定義的組件本質(zhì)上都是一個對象，獲取該對象（假設(shè)變量名為TabBar），要求項目內(nèi)任何組件可使用：
一般在項目的入口文件（如：腳手架搭建項目的main.js）中：
Vue.component("tab-bar",TabBar);
這樣就是全局注冊，該組件TabBar能在整個項目內(nèi)使用
以下用自己的語言將生命周期鉤子表述一下，如果有不對的地方，請校正：
beforeCreate在這個時候，生命周期函數(shù)已經(jīng)準備好。
組件實例已經(jīng)構(gòu)建，但本組件實例的數(shù)據(jù)、方法還沒有注入；
可以在各個生命周期內(nèi)通過組件實例this調(diào)用根實例上注入的$router、$store等對象。
可以在本生命周期內(nèi)進行數(shù)據(jù)初始化；
created在這個時候，當前組件實例this上的屬性（$data、props、$methods...）已經(jīng)注入綁定，可以調(diào)用本實例上的成員屬性；
beforeMount在進入本生命周期之前，會進行以下判斷：
是否有el選項（指定掛載目標）：
有el選項的是根實例；
沒有el選項的是非根實例（默認掛載元素為組件調(diào)用的位置）；
是否有template選項：
有template選項的是內(nèi)聯(lián)模板；
沒有template選項的是單文件組件；
個人覺得，還有render選項的判斷；
最終這些模板都會轉(zhuǎn)換為render函數(shù)進行渲染?。?！
這個生命周期在解析模板，不知道有什么實際用途。
在本生命周期之前，已經(jīng)將模板渲染為真實DOM，其中vm.$el為組件實例的根DOM元素；
本生命周期是初始化第三方插件的場所；
必要時候，可以在本生命周期內(nèi)對DOM進行操作；
本生命周期是獲取this.$refs.ref的場所；
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96589.html
摘要：觸發(fā)事件可以攜帶數(shù)據(jù)，這些數(shù)據(jù)被用于傳遞給綁定了事件的其它組件的回調(diào)函數(shù)上，進而被傳遞給其它組件。父組件可以在回調(diào)函數(shù)里做任何事情，頗有靈活性。一般情況下，父組件會在回調(diào)函數(shù)中更新自己的狀態(tài)數(shù)據(jù)。 上一篇博文梳理了vue的數(shù)據(jù)驅(qū)動和響應(yīng)式相關(guān)的特性，這一篇博文就來梳理vue的一個很重要的特性，組件化。自定義組件之于vue，其意義不亞于函數(shù)之于C，java之類的編程語言。函數(shù)是計算機科學...
摘要：構(gòu)造器有一個選項對象，選項對象的屬性用于定義組件要渲染的。使用注冊組件時，需要提供個參數(shù)，第個參數(shù)時組件的標簽，第個參數(shù)是組件構(gòu)造器。方法內(nèi)部會調(diào)用組件構(gòu)造器，創(chuàng)建一個組件實例。 什么叫組件： 有結(jié)構(gòu)HTML 有樣式CSS 有交互（效果） 行為 信號量存數(shù)據(jù) 組件的行為可以定制？ 通過屬性設(shè)置 在Vue中有什么樣的組件(組件進行分類)： 實現(xiàn)基本功能的基礎(chǔ)的組件（最小的元素） 可復(fù)...
摘要：事件總線事件總線首先創(chuàng)建了一個名為的空的實例然后全局定義了組件最后創(chuàng)建了實例。在父組件模板中，子組件標簽上使用指定一個名稱，并在父組件內(nèi)通過來訪問指定名稱的子組件。 學習筆記：組件詳解 組件詳解 組件與復(fù)用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。 全局注冊 Vue.component(my-component, {}); 要在父實例中使用這個組件，必須要...
閱讀 3804·2021-09-23 11:32
閱讀 2470·2021-09-06 15:01
閱讀 1630·2021-08-18 10:24
閱讀 3468·2019-12-27 11:44
閱讀 3615·2019-08-30 15:52
閱讀 2522·2019-08-30 11:11
閱讀 696·2019-08-29 17:27
閱讀 608·2019-08-29 16:22
