zoukankan      html  css  js  c++  java
  • 组件-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>`
  • 相关阅读:
    vcruntime140.dll 14.0与PHP版本不兼容,PHP Warning: 'vcruntime140.dll' 14.0 is not compatible with this PHP build linked with 14.16 in Unknown on line 0
    PHP处理字符中的emoji表情
    Thinkphp5 使用unlink删除文件出错Permission denied
    TP5多字段排序
    TP5 按照汉字的拼音排序
    PHP发送微信模版消息
    [52ABP系列]
    [52ABP系列]
    通过微信公众号实现微信快捷登陆
    [Jexus系列] 一、安装并运行 Jexus
  • 原文地址:https://www.cnblogs.com/xiaozhang666/p/11982571.html
Copyright © 2011-2022 走看看