Vue元件並且傳遞詳解

2021-10-04 18:21:29 字數 3223 閱讀 8835

了解vue,先看看八個鉤子函式

>

}<

/div>

var vm=

newvue(,

beforecreate()

,created()

,beforemount()

,mounted()

,3000)}

,beforeupdate()

,updated()

,beforedestroy()

,destroyed()

})

全域性元件
//定義乙個全域性元件

vue.

component

('counter',}

,})var vm=

newvue(}

)// -------------在html裡面就可以寫元件定義的標籤了

>

<

/counter>

<

/div>

區域性元件
>

<

/compa>

<

/div>

//------h1和h2都在div裡面

const compb=

const compa=

}var vm=

newvue(,

})

父元件向子元件中傳遞資料,可以在子元件中通過設定props屬性來接收傳遞過來的資料。
>

"title"

:mylist=

"list"

>

<

/lyb>

<

/div>

//---------------------------------------

"text/template" id=

"lybtem"

>

//這是從父元件傳進來

}<

/h1>

//這是從父元件傳進來username,age

for=

"user in mylist"

>}}

<

/li>

<

/ul>

<

/div>

//---------------------------

vue.

component

('lyb',)

var vm=

newvue(,

,]},

})

>

}<

/div>

<

!-- 通過 v-on 監聽事件--

>

"changehandle"

>

<

/send>

<

/div>

//------------

const send=},

methods:}}

var vm=

newvue(,

methods:},

components:

})

>

default可以省略到 --

>

default

="user"

>

my name is

}<

/current-user>

<

/div>

//******************************

vue.

component

('current-user',}

})var vm=

newvue

()

依賴注入 provide inject

它允許乙個祖先元件向其所有子孫後代注入乙個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效。

主要解決了跨級元件間的通訊問題

>

<

/compa>

<

/div>

const compb=

}const compa=},

methods:},

components:

,mounted()

}var vm=

newvue(,

provide:

function()

},components:,}

)<

/script>

父元件向子元件傳遞資料,使用props屬性;子元件向父元件中傳遞資料,在子元件中使用emi

t派發事

件,父組

件中使用

v−on

監聽事件

;缺點:

元件巢狀

層次多的

話,傳遞

資料比較

麻煩。祖

先元件通

過依賴注

入(in

ject

/pro

vide

)的方式

,向其所

有子孫後

代傳遞數

據;缺點

:無法監

聽資料修

改的來源

,不支援

響應式。

通過屬性

emit派發事件,父元件中使用v-on 監聽事件;缺點:元件巢狀層次多的話,傳遞資料比較麻煩。 祖先元件通過依賴注入(inject / provide)的方式,向其所有子孫後代傳遞資料;缺點:無法監聽資料修改的**,不支援響應式。 通過屬性

emit派發

事件,父

元件中使

用v−o

n監聽事

件;缺點

:元件嵌

套層次多

的話,傳

遞資料比

較麻煩。

祖先元件

通過依賴

注入(i

njec

t/pr

ovid

e)的方

式,向其

所有子孫

後代傳遞

資料;缺

點:無法

監聽資料

修改的來

源,不支

持響應式

。通過屬

性root / $parent / $children / ref,訪問根元件、父級元件、子元件中的資料;缺點:要求元件之間要有傳遞性。

vue元件傳遞

這裡測試了乙個父元件接受子元件的例項 import componenta from components componenta listentomyboy function msg boy tell me componenta.vue childworlds 需要在data屬性裡面設定,切記這裡使用...

VUE 建立元件並且引用

本文以 choosingcity.vue 元件為示例 1.建立元件 如圖,在common 中建立了choosingcity.vue 元件 2.在router 資料夾下的index.js 配置該元件 import choosingcity from components common choosing...

VUE元件傳遞引數

誰用誰,誰就是父元件 全域性元件和區域性元件名字衝突時 區域性元件會把全域性元件頂替掉 父頁面向子元件 ul com 通過屬性名 list 傳遞了乙個陣列資料 1,2,3,4 子元件通過 props 進行接收資料 props 資料的 父傳子 在父元件使用子元件的時候 在子元件的行內標籤新增屬性 在子...