组件-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>`