元件 vue自定義方法傳遞

2022-03-07 17:55:05 字數 1633 閱讀 5647

元件樣式

麵包屑導航欄

js

vue.component('bannerone', ,

props: ,

bigimg: ,

bannerheight: ,

aboutyt: ,

downlink: ,

textcolor: ,

bigbackcolors:

},methods: ,

template: `

bar

:bigback-color="bigbackcolors":big-img="bigimg":text-color="textcolor":about-yt="aboutyt"@on-links1="$emit('on-links12')"@out-links1="$emit('out-links12')":down-link="downlink"@on-links2="$emit('on-links22')"@out-links2="$emit('out-links22')"

>

`});

靈活性的banner導航欄,屬性有banner圖路徑,左側的路徑,文字顏色,整個導航和banner的高度等等

使用

<

banner-one

:bigback-colors

="colors"

big-img

="images/topbar_left_h.png"

text-color

="#666666"

img-src

="images/agent/bang_vips.png"

banner-height

="7.14"

:about-yt

="aboutyt"

@on-links12

="onlinksabout"

@out-links12

="outlinksabout"

:down-link

="downlink"

@on-links22

="onlinkshzuo"

@out-links22

="outlinkshzuo"

>

banner-one

>

屬性不講了,重點說自定義方法

@on-links22="onlinkshzuo"@out-links22="outlinkshzuo"

onlinkshzuo

函式名@on-links22為自定義的觸發方法

在元件中使用$emit('out-links22')接收自定義觸發事件

因為此元件是多層傳值元件,所以元件中又用了自定義方法名,正常使用時直接使用即可,例如@click等

舉例

template: `bar 

:bigback-color="bigbackcolors":big-img="bigimg":text-color="textcolor":about-yt="aboutyt"

@click="$emit('on-links12')">

`

vue元件,自定義v model方法

在使用my component元件時,為了實現雙向繫結。vue.component my component model methods 上面 中 1.props物件中,需要定義乙個能夠從外部傳入的變數,這裡我定義了乙個obj。這樣就可以用下面這行 進行傳遞值 2.為了能夠使用v model語法糖,...

Vue 自定義元件

元件 component 是vue.js 最強大的功能。元件可以封裝可重用的 通過傳入物件的不同,實現元件的復用,但元件傳值就成為乙個需要解決的問題。父元件向子元件傳值 元件例項的作用域是孤立的。這意味著不能在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料,我們需要通過子元件的 pr...

Vue 自定義元件

元件 component 是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素,封裝可重用的 在較高層面上,元件是自定義元素,vue.js 的編譯器為它新增特殊功能。在有些情況下,元件也可以表現為用is 特性進行了擴充套件的原生 html 元素。所有的 vue 元件同時也都是 vue...