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