uni-app之自定义组件

一、新建组件

1、在项目“component文件夹”存放公共组件

图1

2、绑定组件

• 2-1、页面：在新建组件中，需要给“<template></template>”绑定组件名称，如：GrowUpClass

<template name="GrowUpClass">
    <view>
        <view class="cu-modal drawer-modal justify-end" :class="isShowModal?'show':''">
            <view class="cu-dialog basis-lg" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]"
             style="min-width:100%;background-color:#F1F1F1;">
                <view style="overflow-y: auto;height: 92%;">
                    <view class="cu-list menu text-left margin-top">
                        <view class="cu-item" v-for="(CL_item,CL_index) in ClassList" :key="CL_index" :data-id="CL_item.FClassID">
                            <view class="content">
                                <checkbox-group class="block fl margin-right-sm" @change="selClassChange" :value="CL_item.FClassID" :data-index="CL_index">
                                    <checkbox :class="selClassIDList.indexOf(CL_item.FClassID)!==-1?'checked':''" :checked="selClassIDList.indexOf(CL_item.FClassID)!==-1?true:false"></checkbox>
                                </checkbox-group>
                                <view class="padding-top-xs">{{ CL_item.FClassName }}</view>
                            </view>
                        </view>
                    </view>
                    <view class="cu-tabbar-height"></view>
                </view>

                <view class="cu-bar foot tabbar bg-white" style="border-top:none">
                    <view v-if="selClassList.length>0">
                        <text class="cuIcon-back padding-left text-gray" @click="hideTabModal"></text>
                        <text class="text-my-color padding-left-xs" @click="clickShowSelClass" data-target="showSelClassModal">
                            <text class="text-my-color">已选择：</text>
                            <text class="text-my-color">{{ selClassList.length }}个<text class="padding-left-xs text-my-color cuIcon-fold"></text></text>
                        </text>
                    </view>
                    <view v-else>
                        <text class="cuIcon-back padding-left text-gray" @click="hideTabModal"></text>
                        <text class="text-my-color padding-left-xs">已选择：</text>
                    </view>
                    <view class="text-right padding-right" v-if="selClassList.length>0" @click="clickSelClassOKBtn">
                        <button class="cu-btn my-bg">确定</button>
                    </view>
                    <view class="text-right padding-right" v-else>
                        <button class="cu-btn my-bg" disabled="disabled">确定</button>
                    </view>
                </view>
            </view>
        </view>


        <!-- 已选择班级的模态框 -->
        <view class="cu-modal drawer-modal justify-end" :class="showSelClassModalName=='showSelClassModal'?'show':''">
            <view class="cu-dialog basis-lg bg-white" @tap.stop="" :style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]"
             style="min-width:100%;background-color:#F1F1F1;">
                <view class="cu-list menu text-left margin-top">
                    <view class="cu-item" v-for="(so_Item,so_Index) in selClassList" :key="so_Index">
                        <view class="content">
                            <view class="padding-top-xs fl">{{ so_Item.cName }}</view>
                            <view class="cuIcon-roundclose padding-top-xs fr text-gray" :data-index="so_Index" @click="clickDelSelClass"></view>
                        </view>
                    </view>
                </view>
                <!-- 返回 -->
                <view class="cu-bar foot tabbar bg-white" style="border-top:none">
                    <view>
                        <text class="cuIcon-back padding-left text-gray" @click="hideShowSelClassModal"></text>
                        <text class="text-my-color padding-left-xs">已选择数量：{{selClassList.length}}</text>
                    </view>
                    <view class="text-right padding-right" v-if="selClassList.length>0" @click="hideShowSelClassModal">
                        <button class="cu-btn my-bg">确定</button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

• 2-2、JS：在新建组件中，需要在export default中声明方法，然后在props定义需要外界传入的参数，在watch定义变量 或者 加载默认数据

<script>
    export default {
        name: "GrowUpClass",
        data() {
            return {
                isShowModal: false,
                CustomBar: 0,

                showSelClassModalName: null, //已选择班级的模态框
                selClassList: [], //已选择班级的班级信息列表
                selClassIDList: [], //已选择班级的班级ID列表

                ClassList: [], //班级列表
                hasClassList: 0 //班级是否有数据
            };
        },
        props: { //此处定义传入的参数
            isShow: {
                type: Boolean
            },
            param: {
                type: Array
            }
        },
        watch: {
            isShow(param) {
                if (param) {
                    this.isShowModal = true;
                } else {
                    this.isShowModal = false;
                }
            },
            param(param) {
                if (param) {
                    var token_1 = param[0].token; //机构ID
                    this.getSClassList(token_1); //页面一打开，就加载数据
                }
            }
        },
        methods: {
            getSClassList(currentToken) { /////////////////////////////////////////////////////////////////页面默认数据
                uni.request({
                    url: getApp().globalData.ehhost + '/api/Classes/getClassList',
                    method: 'POST',
                    header: {
                        "content-type": "application/x-www-form-urlencoded"
                    },
                    data: {
                        'token': currentToken
                    },
                    success: (res) => {
                        if (res.statusCode == 200) {
                            this.ClassList = res.data.resData;
                            if (this.ClassList.length > 0) {
                                this.hasClassList = 2;
                            } else {
                                this.hasClassList = 1;
                            }
                        } else {
                            this.hasClassList = 1;
                        }
                    }
                })
            },
            selClassChange(e) { /////////////////////////////////////////////////////////////////点击“checkbox框”
                let index = e.currentTarget.dataset.index;
                let cbVal = e.detail.value; //用于判断是否选中checkbox
                let cid = this.ClassList[index].FClassID; //班级ID
                let cName = this.ClassList[index].FClassName; //班级名称

                //获取“班级ID”，根据班级ID判断是否有值（有的话=>给选中效果，没有的话=>取消选中效果）
                //this.$set更新数组的同时，更新视图
                if (cbVal.length > 0) {
                    //将班级id、班级名称等组成数组
                    this.selClassList.push({
                        'cID': cid,
                        'cName': cName
                    });
                    //将班级id组成数组，用于判断“点击父级后，子级的班级是否选中”
                    this.selClassIDList.push(cid);
                } else {
                    //删除“已选择班级”的数据 -- 没有勾选“班级”的话，删除数组中对应的班级
                    for (let i_3 = 0; i_3 < this.selClassList.length; i_3++) {
                        if (this.selClassList[i_3]["cID"] == cid) {
                            this.selClassList.splice(i_3, 1);
                        }
                    }
                    for (let i_4 = 0; i_4 < this.selClassIDList.length; i_4++) {
                        if (this.selClassIDList[i_4] == cid) {
                            this.selClassIDList.splice(i_4, 1);
                        }
                    }
                }
            },
            clickShowSelClass(e) { /////////////////////////////////////////////////////////////////打开“已选择班级”的模态框
                this.showSelClassModalName = e.currentTarget.dataset.target;
            },
            hideShowSelClassModal(e) {
                this.showSelClassModalName = null;
            },
            clickDelSelClass(e) { /////////////////////////////////////////////////////////////////打开“已选择班级”的模态框 -- 删除某班级
                let index = e.currentTarget.dataset.index;
                this.selClassList.splice(index, 1);
                this.selClassIDList.splice(index, 1);
            },
            hideTabModal(e) { /////////////////////////////////////////////////////////////////关闭当前模态框，回到具体页面（子组件通知父组件关闭当前模态框）
                this.$emit('isClose', false);
            },
            clickSelClassOKBtn() { /////////////////////////////////////////////////////////////////确认按钮
                var currentOID_1 = this.currentOID;
                var currentType_1 = this.currentType;
                var selClassList_1 = this.selClassList;
                var selClassIDList_1 = this.selClassIDList;

                this.$emit('isClose', false); //返回“关闭”组件
                this.$emit('selClassList', selClassList_1); //返回“班级ID、班级名称”组成的数组
                this.$emit('selClassIDList', selClassIDList_1); //返回“班级ID”组成的数组
            }
        }
    }
</script>

注意：this.$emit()将组件的值传递给视图模板

this.$emit('isClose', false); //返回“关闭”组件

this.$emit('selClassList', selClassList_1); //返回“班级ID、班级名称”组成的数组

this.$emit('selClassIDList', selClassIDList_1); //返回“班级ID”组成的数组

二、使用组件

1、引用组件

import 组件名称 from "../../components/组件名.vue";

2、注册组件

export default{
    components:{
        组件名称
    },
}

3、在视图模板中使用组件

<组件名称 组件属性="对应的值"></组件名称>

可以自定义
:isShow="isShowClass"视图模板中，打开组件
:param="cParamList"视图模板中，需要传入组件的参数
@isClose="closeClassModal"从组件返回数据，通知视图模板
@selClassList="rSelClassList"从组件返回“班级ID、班级名称”组成的数组，通知视图模板
@selClassIDList="rSelClassIDList"从组件返回“班级ID”组成的数组，通知视图模板

4、实例

//第1点（引用组件）和第2点（注册组件）
<script>
    import GrowUpClass from "../../../components/choice/GrowUpClass.vue";
    export default {
        components: {
            GrowUpClass
        },
        data() {
            return {
                isClickClass: 0, //判断是否点击了“接收班级”（0没有点击，1已经点击）
                isShowClass: false, //是否显示“接收班级”的模态框
                cParamList: [], //“接收班级”的模态框 -- 给自定义组件传递参数
            };
        },
        methods: {
            ///////////////////////////////////////////////////////////////////////////////1、选择班级
            clickSelectClass() {
                if (this.isShowClass) {
                    this.isShowClass = false;
                } else {
                    this.isShowClass = true;
                    this.cParamList = [{
                        'token': wx.getStorageSync('access_token')
                    }];
                    this.isClickClass = 1;
                }
            },
            closeClassModal(data) {
                if (!data) {
                    this.isShowClass = false;
                    this.isClickClass = 0;
                }
            },
            rSelClassList(data) {
                this.isShowClass = false;
                this.isClickClass = 0;
                this.prSelClassList = data;
                console.log(this.prSelClassList);
            },
            rSelClassIDList(data) {
                this.isShowClass = false;
                this.isClickClass = 0;
                this.prSelClassIDList = data;
                console.log(this.prSelClassIDList);
            },
        }
    }
</script>

//第3点（在视图模板中使用组件）
<template>
    <view>
        <view v-if="isClickClass==0">
            <view class="cu-form-group align-start margin-top">
                <view class="title">发布内容：</view>
                <textarea maxlength="-1" placeholder="为这次成长记录说点什么吧" :value="publishContentVal" @input="publishContentInput"></textarea>
            </view>
            <view class="cu-form-group margin-top">
                <view class="title">接收班级：</view>
                <view class="text-black" v-if="currentPType=='class'">
                    <text>{{ currentCName }}</text>
                </view>
                <view class="text-black" @click="clickSelectClass" v-else-if="currentPType=='own'">
                    <text>请选择</text>
                    <text class="padding-left-xs text-xl text-grey"><text class="cuIcon-right"></text></text>
                </view>
            </view>
            <view class="cu-form-group margin-top">
                <view class="title">发布类型：</view>
                <picker :value="publishTypeIndex" :range="publishTypeList" @change="pTypeChange">
                    <view class="picker">{{ publishTypeList[publishTypeIndex] }}</view>
                </picker>
            </view>

            <view class="cu-bar bg-white margin-top">
                <view class="action text-black">图片上传：</view>
                <view class="action">{{ imgPathList.length }} / 7</view>
            </view>
            <view class="cu-form-group">
                <view class="grid col-4 grid-square flex-sub">
                    <view class="bg-img" v-for="(item,index) in imgPathList" :key="index" @tap="ViewImage" :data-url="imgPathList[index]">
                        <image :src="imgPathList[index]" mode="aspectFill"></image>
                        <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                            <text class='cuIcon-close'></text>
                        </view>
                    </view>
                    <view class="solids" @tap="ChooseImage" v-if="imgPathList.length<7">
                        <text class='cuIcon-cameraadd'></text>
                    </view>
                </view>
            </view>

            <view class="cu-bar tabbar bg-white foot" @click="publishRecordOK">
                <view class="action">
                    <text class="text-my-color text-lg">立即发布</text>
                </view>
            </view>
        </view>


        <!-- 选择班级 -->
        <GrowUpClass ref="GrowUpClass" :isShow="isShowClass" :param="cParamList" @isClose="closeClassModal" @selClassList="rSelClassList"
         @selClassIDList="rSelClassIDList"></GrowUpClass>
    </view>
</template>