vue專案如何進行頭部元件的抽離復用

2021-10-02 07:14:16 字數 3054 閱讀 9688

建立乙個頭部元件headertop,對於不同的頁面,頭部的中間內容title可能都不一樣,所以我們可以通過父子元件傳值的方式,通過props進行傳值。而對於頭部的左邊和右邊的內容,有的頁面可能會有,有的頁面可能不會有,可以通過插槽slot去解決,slot需要指明name的值,**如下:

>

class

="header"

>

name

="left"

>

slot

>

class

="header_title"

>

class

="header_title_text ellipsis"

>

}span

>

span

>

name

="right"

>

slot

>

div>

template

>

>

export

default

}script

>

lang

="stylus"

rel="stylesheet/stylus"

scoped

>

@import '../../common/stylus/mixins.styl'

.header

background-color #02a774

position fixed

z-index 100

left 0

top 0

width 100%

height 45px

.header_title

position absolute

top 50%

left 50%

transform translate

(-50%, -50%)

width 50%

color #fff

text-align center

.header_title_text

font-size 20px

color #fff

display block

style

>

建立完headertop元件以後,我們就需要在頁面當中去引入元件,對於頭部只有中間的內容,而左邊和右邊沒有內容的,我們就只需要去引入headertop元件,然後去註冊headertop元件,而對於頭部的內容,通過父子元件傳值就可以實現,**如下所示:

>

class

="profile"

>

title

="個人中心"

>

headertop

>

div>

template

>

>

import headertop from

'../../components/headertop/headertop.vue'

export

default

}script

>

lang

="stylus"

rel="stylesheet/stylus"

scoped

>

style

>

對於頭部既有中間的內容,又有左邊和右邊的內容,我們就可以使用插槽。先進行引入headertop元件,然後進行註冊headertop元件。對於頭部中間的title就直接通過父子元件傳值的方式,繫結屬性傳值。對於左邊和右邊的內容,使用slot,並且指明是哪乙個插槽,就可以了,**如下:

>

class

="msite"

>

:title

="address.name"

>

class

="header_search"

slot

="left"

to="/search"

>

class

="iconfont iconsousuo"

>

i>

router-link

>

class

="header_login"

slot

="right"

:to="userinfo._id ? '/userinfo' : '/login'

">

class

="header_login_text"

v-if

="!userinfo._id"

>

登入|註冊span

>

class

="header_login_text"

v-else

>

class

="iconfont iconwo"

>

i>

span

>

router-link

>

headertop

>

div>

template

>

>

import headertop from

'../../components/headertop/headertop.vue'

export

default

}script

>

lang

="stylus"

rel="stylesheet/stylus"

scoped

>

style

>

如何進行專案跟蹤

專案跟蹤主要針對計畫,是為了了解專案的實際進展情況而採取的活動。如了解成員工作完成情況,了解整個專案計畫完成情況等內容。跟蹤主要是為了及時了解專案中的問題,並及時解決,不使問題淤積而釀成嚴重後果。個人認為專案跟蹤還是必要的,因為它可以證明計畫是否可實施,同時可以證明計畫是否可以被完成。詳細的計畫可以...

如何進行專案測試?

一 前期準備 1 測試組與開發組協調,包括專案測試流程約定,測試組與開發組的協作活動安排等 在專案前期,規劃好測試組與開發組的協調工作,可以讓測試人員與專案開發人員彼此了解在測試活動中的職責。為了規避專案部分風險,專案的測試組與開發組需要明確在專案的哪些重要活動需要提前溝通,例如需求的評審,彙總發現...

vue父元件與子元件間如何進行資料傳遞

父元件傳遞資料給子元件 可以通過props屬性來實現 由於元件例項的作用域是孤立的。這意味著不能 也不應該 在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的 props 選項 在模板中,要動態地繫結父元件的資料到子模板的 props,與繫結到任何普通的 html...