4.uni-app（自定义组件）

创建自定义组件

1. 项目根目录新建components目录

2.右键components目录，新建组件
勾选创建同名目录，使用自定义组件的时候，不用import了

新建组件.png

3.设置自定义属性
自定义属性包含三项：名称，value的类型、默认值

4.使用自定义属性

// 组件内部使用 - 大括号获取调用者传值
{{text}}
// 调用者引用组件传值

// 组件内部使用方式

// 调用者使用变量传值时  ①属性前要用:②值为变量名（不需要大括号）

// 如：
data() {
    return {
        imgUrl:"http://www.xxx.xx/a.jpg"
    }
}

// 如果设置为接收Number类型 ，调用者传值直接为常量，
// 需要属性前加：否则认为传的是字符串2，而不是数字类型2
// Boolean类型同Number类型
// 当然如果值为变量，如上"src"使用方式一样

5.脚本块获取自定义属性的value

var num = this.$props.属性名

6.0动态设置样式
:style="{'height':statusBarHeightPx}"
①动态样式要用:style=
②{} 大括号代表动态value
③大括号里的属性名要用''括起来
④大括号里的属性值（固定值）用''括起来 如下所示：box-sizing，position
④大括号里的属性值（变量）用data数据里的属性名 如下所示：background-color，height

data() {
    return {
        statusBarHeight: "",
        bg: "#2fa1f0"
    };
}

6.1方法动态设置样式
:style="getColor(params)"
①动态样式要用:style=
②""里面为调用的方法

getColor(params) {
     let str = '#FFFFFF'
     ...
     return {
        'background-color': str
     }
}

6.2动态引用computed里的方法
:style="{'height':maxHeight}"
①动态样式要用:style=
②值为computed里的方法名

computed: {
    maxHeight() {
        return "calc(" + this.page.topBarHeight + " + 100px)"
    }
}

7.自定义组件发送事件给页面

// 参数1：自定义事件名
// 参数2：传递的数据
this.$emit("downCallback","下拉刷新")

8.页面调用自定义组件的方法

// 自定义组件
// ①定义方法
refreshEnd() {
    this.mescroll.endSuccess()
}

// 页面
// ①通过给自定义组件绑定ref

// ②调用自定义组件方法
this.$refs.refresh.自定义组件方法名

// 示例：this.$refs.refresh.refreshEnd()

9.class样式的穿透

// 内部组件禁止引用方穿透样式 用scoped进行修饰





// 引用方穿透组件样式（前提 组件未使用scoped修饰）



.new >>> .code{
    color: #4CD964;
}
// 或
.new /deep/ .code{
    color: #4CD964;
}

使用自定义组件

//  @downCallback='downRefresh' 
//  downCallback组件自定义事件名
//  downRefresh接收事件数据的方法



    
    



downRefresh(data) {
    // data 接收事件的数据 
},