4.uni-app（自定義組件）

創(chuàng)建自定義組件

項(xiàng)目根目錄新建components目錄

2.右鍵components目錄秕脓，新建組件
勾選創(chuàng)建同名目錄柒瓣，使用自定義組件的時(shí)候，不用import了

新建組件.png

3.設(shè)置自定義屬性
自定義屬性包含三項(xiàng)：名稱吠架，value的類型芙贫、默認(rèn)值

<script>
    export default {
        props: {
            src: {
                type: String,
                default: ""
            },
            text: {
                type: String,
                default: ""
            },
            border: {
                type: Number,
                default: 2
            },
            // Array類型默認(rèn)值要以函數(shù)的形式進(jìn)行返回
            data: {
                type: Array,
                default: () {
                    return []
                }
            }
        }
    }
</script>

4.使用自定義屬性

// 組件內(nèi)部使用 - 大括號獲取調(diào)用者傳值
<text class="find-textBlack">{{text}}</text>
// 調(diào)用者引用組件傳值
<Custom text="abc"></Custom>

// 組件內(nèi)部使用方式
<image :src="src"></image>
// 調(diào)用者使用變量傳值時(shí)  ①屬性前要用:②值為變量名（不需要大括號）
<Custom :src="imgUrl" ></Custom>
// 如：
data() {
    return {
        imgUrl:"http://www.xxx.xx/a.jpg"
    }
}

// 如果設(shè)置為接收Number類型 丈莺，調(diào)用者傳值直接為常量谜诫，
// 需要屬性前加：否則認(rèn)為傳的是字符串2嗜历，而不是數(shù)字類型2
// Boolean類型同Number類型
// 當(dāng)然如果值為變量，如上"src"使用方式一樣
<Custom :border="2" ></Custom>

5.腳本塊獲取自定義屬性的value

var num = this.$props.屬性名

6.0動態(tài)設(shè)置樣式
:style="{'height':statusBarHeightPx}"
①動態(tài)樣式要用:style=
②{} 大括號代表動態(tài)value
③大括號里的屬性名要用''括起來
④大括號里的屬性值（固定值）用''括起來如下所示：box-sizing酗捌，position
④大括號里的屬性值（變量）用data數(shù)據(jù)里的屬性名如下所示：background-color，height

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

6.1方法動態(tài)設(shè)置樣式
:style="getColor(params)"
①動態(tài)樣式要用:style=
②""里面為調(diào)用的方法

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

6.2動態(tài)引用computed里的方法
:style="{'height':maxHeight}"
①動態(tài)樣式要用:style=
②值為computed里的方法名

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

7.自定義組件發(fā)送事件給頁面

// 參數(shù)1：自定義事件名
// 參數(shù)2：傳遞的數(shù)據(jù)
this.$emit("downCallback","下拉刷新")

8.頁面調(diào)用自定義組件的方法

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

// 頁面
// ①通過給自定義組件綁定ref
<Custom src="../../static/home-icon/find_qiuguan.png" text="球館" ref="refresh" ></Custom >
// ②調(diào)用自定義組件方法
this.$refs.refresh.自定義組件方法名

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

9.class樣式的穿透

// 內(nèi)部組件禁止引用方穿透樣式 用scoped進(jìn)行修飾

<view class="code"></view>

<style lang="scss" scoped>
    .code {
        color: #FFFFFF;
    }
</style>

// 引用方穿透組件樣式（前提 組件未使用scoped修飾）

<Custom class="new"></Custom >

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

使用自定義組件

//  @downCallback='downRefresh' 
//  downCallback組件自定義事件名
//  downRefresh接收事件數(shù)據(jù)的方法

<view class="header">

    <Custom src="../../static/home-icon/find_qiuguan.png" text="球館" oneRowItemNum="2" @downCallback='downRefresh' ></Custom >
    <Custom src="../../static/home-icon/cclub.png" text="俱樂部" oneRowItemNum="2" @downCallback='downRefresh'></Custom >

</view>

downRefresh(data) {
    // data 接收事件的數(shù)據(jù) 
},

最后編輯于：2021.09.22 13:33:19

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者