VueJS圖解路由與父子傳值-部分總結

最近開始接觸vue,以下完全是自己學Vue總結的知識,如果哪裡有不對的地方還望不吝賜教。

在Vue裡router-link與router-view是成對出現的,並且在同一個頁面之中,它們之間原本是誰也不理誰,沒有交互的,正因為路由配置,所以它們倆就變得親密無比。

來看一個這個路由配置:

VueJS圖解路由與父子傳值-部分總結

Vue裡需要配置一個路由數組,數組裡面的數據由對象構成,那好我們來看看這路由對象都有什麼屬性:

Path:訪問的路由路徑相對地址;

Name:給路由設置一個名字,有了名字就可以不用使用path路由路徑值

Component:路由上組件值,當用戶點擊某個地址後,查詢到的組件值。

按照我個人的理解path和name屬性都是提供給router-link用的,比如:

Router-link有一個to屬性,表示用戶點擊某個按鈕後要去的地方,可以是配置路由裡面的path值,如果取path值的話可以省略表明to是綁定操作(:to=’’),並且可以省略path=’’中的path字樣,最終可寫成to=’/home’,之前不是介紹Name是路由的名字嗎,可以代表要去的路由,如果採用Name值的話就需要顯式綁定to值,並且表明取自Name值,最終寫法是這樣:to=”{name:’xxx’}”,兩種寫法都可以:

to=’/home’ <==> :to=”{name:’homelink’}”

上面說了一下router-link的操作,接下來說說這個router-view,因為它們是成對出現,所有router-link點擊去往的路由會在router-view裡面呈現,組件的一個價值就是可以複用,我們可以通過給router-view一個name屬性達到複用組件的效果,例如:我們在根路徑頁面下複用一些組件,需要在路由配置裡做些修改:

VueJS圖解路由與父子傳值-部分總結

注意標紅部分,如果只顯示一個組件就要寫成component不加s的。

在默認顯示下我們需要掛載多個組件有:orderingGuide,delivery,history當然它們所對應的值都是導入顯示組件的路由地址。

VueJS圖解路由與父子傳值-部分總結

在router-view裡面加一個name屬性

VueJS圖解路由與父子傳值-部分總結

上面總結了路由的一部分知識點,下面再總結一下vue裡面父子傳值的知識

父子傳值很簡單,先說說父類向子類傳值

父類向子類傳值

子類定義一個屬性,比如:title屬性,指明它的類型

VueJS圖解路由與父子傳值-部分總結

接下來在父類調用子類的地方,讓子類綁定此屬性

VueJS圖解路由與父子傳值-部分總結

父類直接給這個綁定的title屬性傳值即可

VueJS圖解路由與父子傳值-部分總結

子類向父類傳值

這個稍微稍微繞一點,之所以繞是因為子類需要“第三方”去向父類傳值,例如:子類觸發點擊事件,然後給自身註冊一個事件,註冊事件是目的(跟父類向子類傳值,子類定義一個屬性是一個意思)

VueJS圖解路由與父子傳值-部分總結

在父類調用子類的地方,子類綁定這個註冊好的事件,在父類寫實現方法

VueJS圖解路由與父子傳值-部分總結

最後,我通過大一統的圖總結一下上面的知識,涉及到一級路由,二級路由,組件複用,父子傳值。

一級路由

VueJS圖解路由與父子傳值-部分總結

二級路由

VueJS圖解路由與父子傳值-部分總結

組件複用

VueJS圖解路由與父子傳值-部分總結

父類向子類傳值

VueJS圖解路由與父子傳值-部分總結

子類向父類傳值

VueJS圖解路由與父子傳值-部分總結


分享到:


相關文章: