uni-app之自定义组件

一、新建组件

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

图1

2、绑定组件

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

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

注意：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点（注册组件）

//第3点（在视图模板中使用组件）