data屬性
通過data屬性指定自定義組件的初始數(shù)據(jù)奋姿,要求data必須是一個(gè)函數(shù)锄开,如果不是函數(shù)就會(huì)報(bào)錯(cuò)。
Props屬性
組件可以嵌套使用称诗,叫做父子組件萍悴。那么父組件經(jīng)常要給子組件傳遞數(shù)據(jù)這叫做父子組件通信。
父子組件的關(guān)系可以總結(jié)為?props 向下傳遞寓免,事件向上傳遞癣诱。
父組件通過?props?給子組件下發(fā)數(shù)據(jù),子組件通過事件給父組件發(fā)送消息再榄。
1狡刘、在父組件中定義數(shù)據(jù)
2、在使用組件時(shí)困鸥,綁定父組件中的數(shù)據(jù)
3嗅蔬、在子組件中通過props屬性聲明父組件中傳遞過來的參數(shù)
4、在template屬性中使用父組件中的參數(shù)
Props屬性
組件可以嵌套使用疾就,叫做父子組件澜术。那么父組件經(jīng)常要給子組件傳遞數(shù)據(jù)這叫做父子組件通信。
父子組件的關(guān)系可以總結(jié)為?props 向下傳遞猬腰,事件向上傳遞鸟废。
父組件通過?props?給子組件下發(fā)數(shù)據(jù),子組件通過事件給父組件發(fā)送消息姑荷。
1盒延、在父組件中定義數(shù)據(jù)
2、在使用組件時(shí)鼠冕,綁定父組件中的數(shù)據(jù)
3添寺、在子組件中通過props屬性聲明父組件中傳遞過來的參數(shù)
4、在template屬性中使用父組件中的參數(shù)
7懈费、props校驗(yàn)
子組件在接收父組件傳入數(shù)據(jù)時(shí), 可以進(jìn)行props校驗(yàn)计露,來確保數(shù)據(jù)的格式和是否必傳≡饕遥可以指定一下屬性:
1) type: 指定數(shù)據(jù)類型 String Number Object ...注意不能使用字符串?dāng)?shù)組票罐,只能是對(duì)象大寫形式
2) required: 指定是否必輸
3) default: 給默認(rèn)值或者自定義函數(shù)返回默認(rèn)值
4) validator: 自定義函數(shù)校驗(yàn)
非props屬性
? 引用子組件時(shí),非定義的props屬性,自動(dòng)合并到子組件上,class和style也會(huì)自動(dòng)合并泞边。
Props屬性
組件可以嵌套使用该押,叫做父子組件。那么父組件經(jīng)常要給子組件傳遞數(shù)據(jù)這叫做父子組件通信繁堡。
父子組件的關(guān)系可以總結(jié)為?props 向下傳遞沈善,事件向上傳遞乡数。
父組件通過?props?給子組件下發(fā)數(shù)據(jù)椭蹄,子組件通過事件給父組件發(fā)送消息闻牡。
1、在父組件中定義數(shù)據(jù)
2绳矩、在使用組件時(shí)罩润,綁定父組件中的數(shù)據(jù)
3、在子組件中通過props屬性聲明父組件中傳遞過來的參數(shù)
4翼馆、在template屬性中使用父組件中的參數(shù)
7割以、props校驗(yàn)
子組件在接收父組件傳入數(shù)據(jù)時(shí), 可以進(jìn)行props校驗(yàn),來確保數(shù)據(jù)的格式和是否必傳应媚⊙狭ぃ可以指定一下屬性:
1) type: 指定數(shù)據(jù)類型 String Number Object ...注意不能使用字符串?dāng)?shù)組,只能是對(duì)象大寫形式
2) required: 指定是否必輸
3) default: 給默認(rèn)值或者自定義函數(shù)返回默認(rèn)值
? 4) validator: 自定義函數(shù)校驗(yàn)
自定義事件
父組件給子組件傳值使用props屬性, 那么需要子組件更新父組件時(shí),要使用自定義事件$on和$emit:
?$on監(jiān)聽: 不能監(jiān)聽駝峰標(biāo)示的自定義事件, 使用全部小寫(abc)或者-(a-b-c)
?$emit主動(dòng)觸發(fā): $emit(事件名,傳入?yún)?shù))
主動(dòng)掛載
? 自定義事件不僅可以綁定在子組件中姜,也可以直接掛載到父組件消玄,使用$on綁定和$emit觸發(fā)。
具名插槽
具名插槽slot, 就是給插槽起個(gè)名字丢胚。
在子組件定時(shí)可以定定義多個(gè)插槽,同時(shí)通過name屬性指定一個(gè)名字,如:翩瓜,父組件引用時(shí)使用< slot='header'>進(jìn)行插槽選擇。
作用域插槽slot-scope携龟,
父組件通過插槽混入父組件的內(nèi)容, 子組件也可以通過slot作用域向插槽slot內(nèi)部傳入數(shù)據(jù)兔跌,使用方式:,
父組件通過<template slot-scope="props">進(jìn)行引用峡蟋。
動(dòng)態(tài)組件
? 使用<component>標(biāo)簽的is屬性,動(dòng)態(tài)綁定多個(gè)組件到一個(gè)掛載點(diǎn),通過改變is綁定值,切換組件坟桅。
動(dòng)態(tài)組件
使用標(biāo)簽的is屬性,動(dòng)態(tài)綁定多個(gè)組件到一個(gè)掛載點(diǎn),通過改變is綁定值,切換組件。
keep-alive
如果把切換出去的組件保留在內(nèi)存中蕊蝗,可以保留它的狀態(tài)或避免重新渲染仅乓。為此可以添加一個(gè)?keep-alive?指令。
refs
? 使用ref 給每個(gè)組件起一個(gè)固定的名字,方便后續(xù)直接引用操作匿又,在父組件中使用$refs訪問子組件方灾。
$watch第一個(gè)參數(shù)是需要監(jiān)聽的屬性,第二個(gè)是回調(diào)函數(shù)用法和watch一樣碌更。需要取消監(jiān)聽只需拿到監(jiān)聽對(duì)象的引用裕偿,這個(gè)引用是返回一個(gè)函數(shù)對(duì)象,執(zhí)行該對(duì)象就可以取消監(jiān)聽痛单。
同時(shí)監(jiān)聽多個(gè)屬性嘿棘,可以不指定屬性:
computed屬性
computed計(jì)算屬性用于定義比較復(fù)雜的屬性計(jì)算
computed和methods區(qū)別:
計(jì)算屬性使用computed定義, 方法使用methods定義
計(jì)算屬性使用時(shí)不加括號(hào)執(zhí)行符
計(jì)算屬性是基于它們的依賴進(jìn)行緩存的,計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值。否則返回之前計(jì)算好的值,性能更高!
computed屬性
computed計(jì)算屬性用于定義比較復(fù)雜的屬性計(jì)算
computed和methods區(qū)別:
計(jì)算屬性使用computed定義, 方法使用methods定義
計(jì)算屬性使用時(shí)不加括號(hào)執(zhí)行符
計(jì)算屬性是基于它們的依賴進(jìn)行緩存的,計(jì)算屬性只有在它的相關(guān)依賴發(fā)生改變時(shí)才會(huì)重新求值旭绒。否則返回之前計(jì)算好的值,性能更高!
自定義指令
全局指令
局部指令
使用directive定義鸟妙,第一個(gè)參數(shù)為指令名焦人,使用時(shí)加上v-前綴才能生效重父。
? inserted屬性指當(dāng)綁定元素插入到DOM時(shí)調(diào)用花椭。
鉤子函數(shù)的參數(shù)有三個(gè):
1)el:當(dāng)前指令綁定元素
2)binding:當(dāng)前指令綁定的所有信息對(duì)象,有以下屬性:
name:指令名房午,不包括?v-?前綴宾娜。
value:指令的綁定值前塔,例如:v-my-directive="1 + 1", value 的值是?2。
oldValue:指令綁定的前一個(gè)值顶燕,僅在?update?和?componentUpdated?鉤子中可用欧引。無論值是否改變都可用因痛。
expression:綁定值的字符串形式廓译。例如?v-my-directive="1 + 1"?瓜挽,expression 的值是?"1 + 1"。
arg:傳給指令的參數(shù)颠放。例如?v-my-directive:foo,arg 的值是?"foo"欲低。
modifiers:一個(gè)包含修飾符的對(duì)象。例如:v-my-directive.foo.bar, 修飾符對(duì)象 modifiers 的值是?{ foo: true, bar: true }。
3)vnode:Vue 編譯生成的虛擬節(jié)點(diǎn)
4)oldVnode:上一個(gè)虛擬節(jié)點(diǎn),僅在?update?和?componentUpdated
? 鉤子中可用辆毡。
過濾器
Vue允許自定義過濾器菜秦,可被用作一些常見的文本格式化。
過濾器可以用在兩個(gè)地方:mustache 插值和?v-bind?表達(dá)式?(后者從 2.1.0+ 開始支持)胚迫。
? 過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部喷户,由“管道”符指示: