Vue元件化開發

步驟

vue.extend建立元件構造器,並傳入template自定義我們的模板

vue.component註冊元件，傳入兩個引數('註冊元件的標籤名',元件構造器)

必須掛載到vue例項中使用元件標籤

注意：

全域性元件：

區域性元件：

components:

}})

建議用方法2，直接寫乙個標籤即可通過template='#id'呼叫

直接寫乙個template標籤

內容哈哈哈

元件的資料存放

每個元件返回乙個新物件（物件之間互不影響）

//在函式中每次執行的時候都會重新執行上下文return new obj，

//記憶體位址不同所以是不同物件
vue.component('cpn',
}})

每個元件使用同乙個物件（一般沒有這樣用的）

const obj = 

//這裡在呼叫obj時每次呼叫都是相同的記憶體位址，
//所以是同乙個物件
vue.component('cpn',
})

把父元件的資料傳遞給子元件

傳遞屬性：在子元件中，通過props來配置被傳遞的屬性及型別。(props和methods同級)

然後即可在子元件中使用父屬性

//我是子元件

}

注意事項：

v-bind中的駝峰標識

props兩種配置型別

陣列型別（一般很少用到，基本用物件）

props:['cmovies','cmessage']

物件型別

物件中type型別驗證都包括

string/number/boolean/array/object/date/function/symbol

注意： 當type為object 或array時，default為物件型別

default() //或

}物件型別用法示例

vue.component('my-component',,

//帶有預設值的數字
propd:,
//帶有預設值的物件
prope:}},
//自定義驗證函式
propf:
}} })

自定義型別

當我們有自定義建構函式時，也可以自定義型別

function person(firstname,lastname)

vue.component('log-post',
})

子元件向父元件傳遞資料，要用到自定義事件。

在子元件中，通過$emit()來觸發事件。

在父元件當前例項中，通過v-on來監聽子元件事件。

$emit('事件名',資料)

v-on:'事件名'=呼叫函式名。

當$emit內傳遞資料，監聽事件呼叫函式不寫括號()，預設把當前資料傳遞給函式。

ps：正常不寫()調函式瀏覽器會把event事件傳遞過去，這裡是把$emit內的資料傳遞過去

注意監聽事件寫在自定義標籤內

}

需求：

父元件中的資料傳到子元件中

子元件input框中輸入number，父元件的data同時發生改變

子元件2是子元件1的100倍

偽**：

父傳子，把父元件data傳到子元件中顯示

子元件中嘗試動態繫結v-model動態改變props

繫結失敗不支援直接修改props資料，報錯建議通過data或computed修改

通過子元件定義乙個data，data=props中的資料

通過v-model源**呼叫函式，把動態資料繫結到子元件資料中

把子元件資料發射到父元件

通過父元件函式修改父元件的data

接著完成需求3，讓子元件2=子元件1*100，但發現bug，子元件2中的props資料沒有更改

把子元件2發射到父元件，通過第7步函式更改父元件，讓父傳子的props資料得到改變

至此全部完成，撒花~

data:,
//子傳父
methods:,
getnum2(event)
},components:,
//不能直接修改props，通過data或computed
data()
},methods:,
changenum2(event),}}
}})

$refs (使用頻率高)

呼叫時預設是乙個空物件，只有在標籤中加ref='屬性名'才會顯示，這樣就可以具體到某乙個標籤

showchild()

$parent

$root

直接訪問根元件，也就是vue例項

$el（訪問元件）

所有元件都有乙個屬性$el，用於獲取元件中的元素

正常我們只能監聽標籤的事件，

如果想要監元件點選事件，需要在v-on事件後新增乙個修飾符

之前在vue基礎筆記中寫過

//監聽元件根元素的原生事件。

.native

用法示例

@click.native = 'backclick'

當我們從父向子傳遞資料，並且需要父子的資料同步時，可以進行如下操作

}

更改count

Vue元件化開發

1 模組化 模組化開發是從 邏輯角度來劃分的。2 元件化 是從ui介面角度來劃分的。使用標籤形式引入元件 mycom div 建立元件第一種方式 vue.component mycom 建立乙個vue例項 var vm newvue methods script body 使用標籤形式引入元件 my...

Vue元件化開發

前言 1 全域性元件註冊語法 vue.comonent 元件名稱，2 元件的用法 3 元件註冊注意事項 4 元件的命名方式 vue.component my component vue.component mycomponent 5 區域性元件註冊 var componenta var compon...

Vue元件化開發

1.建立元件構造器 2.註冊元件 3.使用元件 cpn div 1.建立元件構造器物件 const cpnc vue.extend 2.註冊元件 標籤名，元件構造器 vue.component cpn cpnc newvue script 各步驟的含義 1.vue.extend 2.vue.comp...