组件-vue自定义方法传递
组件样式
面包屑导航栏
js
Vue.component('bannerOne', { created() { console.log(this.bigbackColor); }, props: { imgSrc: { type: String, default: 'images/aboutYaotiao/banner.png' }, bigImg: { type: String, default: 'images/topbar_left.png' }, bannerHeight: { type: String, default: '8.2' }, aboutYt: { type: Boolean, default: false }, downLink: { type: Boolean, default: false }, textColor: { type: String, default: 'white' }, bigbackColors: { type: String, default: '' } }, methods: { }, template: `<div class="banner1" :style="{backgroundImage: 'url('+ imgSrc +')',height:bannerHeight+'rem'}"> <top-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')" > </top-bar> </div>` });
灵活性的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: `<div class="banner1" :style="{backgroundImage: 'url('+ imgSrc +')',height:bannerHeight+'rem'}"> <top-bar :bigback-color="bigbackColors" :big-img="bigImg" :text-color="textColor" :about-yt="aboutYt"
@click="$emit('on-links12')">
</top-bar> </div>`