元件樣式
麵包屑導航欄
js
vue.component('bannerone', ,靈活性的banner導航欄,屬性有banner圖路徑,左側的路徑,文字顏色,整個導航和banner的高度等等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-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...