Vue組件化小結(jié)

組件:

類似于 模塊化 概念

一、組件定義

1)局部組件

只能在自己的Vue對象范圍內(nèi)使用躬存。

new Vue({

el:

data:

...

components:{

'組件名':{

template:'html標簽' —— 組件使用的模板

},

'組件名2':{

template:'html標簽' —— 組件使用的模板

}

}

})

*注意事件:? 組件名不能有大寫字母 —— vue 2.2.4

2)全局組件

在哪里(Vue認識的范圍)都可以使用的組件。

Vue.component('組件名',{

//選項

template:'html標簽'

});

二羽嫡、組件的內(nèi)部信息(選項)——細化選項:

1谨湘、template —— 渲染組件的模板

2、數(shù)據(jù) —— 函數(shù)形式碱屁,函數(shù)有返回值,返回json蛾找,json里面就是這個組件的數(shù)據(jù)data(){return {msg:'',a:12,arr:[].....}}

3娩脾、方法 methods:{show(){},show2(){}}三、模板提取

1)template 標簽

2)script 標簽 —— 官方推薦

...

組件間的通信:


1打毛、父子間——子組件使用父組件的數(shù)據(jù)

2柿赊、父子間——父組件使用子組件的數(shù)據(jù)

3、組件間——A組件和B組件之間的數(shù)據(jù)交換

一幻枉、子組件使用父組件的數(shù)據(jù)

1膜钓、在父組件里允睹,通過自定義屬性的方式晚树,把數(shù)據(jù)傳到子組件<子組件 :屬性名='父級數(shù)據(jù)'>2在抛、在子組件里接收1)Vue.compoent('',{props:['屬性名']});

2)Vue.componet('',{props:{'屬性名':String / Number}//*? 如果參數(shù)是數(shù)字钙勃,但是指定的是String,這時會有警告漩怎,但不影響程序結(jié)果})

3糊秆、在子組件里使用:

{{屬性名}}

父組件使用子組件的數(shù)據(jù)

1鹏往、子級主動發(fā)送數(shù)據(jù)

this.$emit('事件名',要發(fā)送的數(shù)據(jù));? ——? 可以理解為子級新建了一個事件并且把它公布出去了脚粟,父級就可以使用這個事件了

this.$emit('child-say',msg);

2覆旱、父級通過事件的方式來取數(shù)據(jù)

@事件名=“父級方法名”

@child-say="receive"

-------

receive(d){

alert(d);? //這里的d就是子級的數(shù)據(jù)


組件通信:1、子取父核无,父取子子取父:父:{

//res ->? a的數(shù)據(jù)

});

這種方式的缺點: 不同的組件扣唱,發(fā)出的事件名不能重。

3团南、單一集中數(shù)據(jù)管理

定義一個公用的對象噪沙,大家用的數(shù)據(jù)都在這個對象里,任何組件可以直接使用吐根,可以更改——利用了 引用 的特性正歼。

const DATA = {

msg:'明天接著唱',

name:'蔡哲浩',

count:2

};

1.定義組件

全局

局部

2.組件通信

1)父子間

父->子:自定義屬性,props

子->父:this.$emit('say',msg) , @say="show"

2)單一事件管理

let ev = new Vue();

發(fā):ev.$emit('say',msg);

收:ev.$on('say',r=>{

r

});

3)單一集中數(shù)據(jù)管理

const DATA = {

msg1:..

msg2:..

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末拷橘,一起剝皮案震驚了整個濱河市局义,隨后出現(xiàn)的幾起案子喜爷,更是在濱河造成了極大的恐慌,老刑警劉巖萄唇,帶你破解...
    沈念sama閱讀 211,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件檩帐,死亡現(xiàn)場離奇詭異,居然都是意外死亡另萤,警方通過查閱死者的電腦和手機湃密,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來四敞,“玉大人泛源,你說我怎么就攤上這事∧垦” “怎么了俩由?”我有些...
    開封第一講書人閱讀 157,435評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長癌蚁。 經(jīng)常有香客問我幻梯,道長,這世上最難降的妖魔是什么努释? 我笑而不...
    開封第一講書人閱讀 56,509評論 1 284
  • 正文 為了忘掉前任碘梢,我火速辦了婚禮,結(jié)果婚禮上伐蒂,老公的妹妹穿的比我還像新娘煞躬。我一直安慰自己,他們只是感情好逸邦,可當我...
    茶點故事閱讀 65,611評論 6 386
  • 文/花漫 我一把揭開白布恩沛。 她就那樣靜靜地躺著,像睡著了一般缕减。 火紅的嫁衣襯著肌膚如雪雷客。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,837評論 1 290
  • 那天桥狡,我揣著相機與錄音搅裙,去河邊找鬼。 笑死裹芝,一個胖子當著我的面吹牛部逮,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播嫂易,決...
    沈念sama閱讀 38,987評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼兄朋,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了怜械?” 一聲冷哼從身側(cè)響起蜈漓,我...
    開封第一講書人閱讀 37,730評論 0 267
  • 序言:老撾萬榮一對情侶失蹤穆桂,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后融虽,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體享完,經(jīng)...
    沈念sama閱讀 44,194評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,525評論 2 327
  • 正文 我和宋清朗相戀三年有额,在試婚紗的時候發(fā)現(xiàn)自己被綠了般又。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,664評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡巍佑,死狀恐怖茴迁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情萤衰,我是刑警寧澤堕义,帶...
    沈念sama閱讀 34,334評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站脆栋,受9級特大地震影響倦卖,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜椿争,卻給世界環(huán)境...
    茶點故事閱讀 39,944評論 3 313
  • 文/蒙蒙 一怕膛、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧秦踪,春花似錦褐捻、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,764評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至景馁,卻和暖如春边苹,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背裁僧。 一陣腳步聲響...
    開封第一講書人閱讀 31,997評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留慕购,地道東北人聊疲。 一個月前我還...
    沈念sama閱讀 46,389評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像沪悲,于是被迫代替她去往敵國和親获洲。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,554評論 2 349

推薦閱讀更多精彩內(nèi)容