本章节内容：小程序自定义组件的创建和使用

参考资料

小程序自定义组件

创建自定义组件

• 在项目根目录中 创建components => index（component文件夹下文件的名字）文件夹
• 在新建的components => index 文件夹上 右键'新建 Component'
• 建入组件的名称之后回车 会自动生成组件对应的4个文件 后缀名分别为.js .json .wxml .wxss

引用组件

组件的引用方式分为 '局部引用' 和 '全局引用'

• 局部引用:组件只能在当前被引用的页面内使用
• 全局引用:组件可以在每个小程序页面中使用

  局部引用组件

  在页面的.json配置文件中引用组件的方式 叫做'局部引用'

  //在页面的 .json文件中引用组件
  {
   "usingComponents": {
     "my-component": "/components/index"
  }
  }
  //在页面的.wxml文件中可以直接使用组件
  <view>
  <my-component></my-component>
  </view>
  

  全局引用组件

  在app.json全局配置文件中引用组件的方式 叫做全局引用

  //在app.json文件中引入组件
  {
    "pages": [],
    "window": {},
    "usingComponents": {
        "my-component": "/components/index"
    }
  }
  //在页面的 .wxml文件中 使用组件
  <view>
  <my-component></my-component>
  </view>
  

组件和页面的区别

从表面看 组件和页面都是由.js .json .wxml和.wxss四个文件组件 但是组件和页面的.js与.json文件有明显的不同

• 组件的 .json 文件中 需要声明 "component": true 属性
• 组件的 .js 文件中调用的是 Component() 函数

• 组件的事件处理函数需要定义到 methods 节点中

  methods 方法

  在小程序组件中,事件处理函数和自定义方法需要定义到methods节点中

  Component({
    //组件方法列表[包含事件处理函数和自定义方法]
    methods:{
  //声明处理函数
    }
  })
  

  properties属性

  在小程序组件中 properties是组件的对外属性 用来接收外界传递到组件中的数据

  //wxml文件
  <my-component max='5'></my-component>
  //js文件
  Component({
    //属性定义
    properties:{
        //完整定义属性的方法(当需要指定属性默认值时,建议使用此方式)
        max:{
  		// type 表是要接受的数据的类型
            type:Number,
  		//value 默认值
             value:10
        },
    //简化定义属性方式(不需要指定属性默认值时,可以使用简化方式)
    max:Number
    }
  })
  

  data和properties的区别

  在小程序的组件中 properties属性和data数据的用法相同 他们都是可读可写的

• data 更倾向于存储组件的私有数据

• properties更倾向于存储外界传递到组件中的数据

  使用setData 修改properties的值

  由于data数据和properties属性本质上没有任何区别 因此properties属性的值也可以用于页面渲染或使用setData为properties中的属性重新赋值

  自定义组件传参

• 父组件通过属性的方式给子组件传递参数
• 子组件通过事件的方式向子组件传递参数

  父传子

  父组件向子组件传递参数，子组件需要在properties中接收传递过来的参数

  //子组件wxml
  <view class="container">
  <view bindtap="close">关闭</view>
  </view>
  //子组件wxss样式
  .container{
  width: 150px;
  height: 150px;
  background-color: green;
  border: 1px solid #000000;
  }
  //父组件wxml
  <view bindtap="childisShow">开启</view>
  <my-component wx:if="{{isShow}}"></my-component>
  </view>
  //父组件js
  //在data中定义
  data:{
  isShow:false
  }
  //声明方法
  childisShow(){
    this.setData({
      isShow:true
    })
  },
  

  子传父

  子传父是通过事件来触发的

• 1.在子组件中通过 this.triggerEvent(“父组件自定义的事件名”,要传递的参数) 来通过事件传递数据给父组件。
• 2、 triggerEvent方法可以把组件内部的数据传到外面，触发组件外的事件。它接收3个参数：

  this.triggerEvent('myevent', myEventDetail, myEventOption)。
  

  myEventDetail和myEventOption都是对象，myEventDetail是传到组件外的数据，myEventOption有三个参数可以设置：

• bubbles 默认false 事件是否冒泡
• composed 默认false 事件是否可以穿越组件边界
• capturePhase 默认false 事件是否拥有捕获阶段

  //子组件wxml
  <view class="container">
  <view bindtap="close">关闭</view>
  </view>
  //子组件wxss样式
  .container{
  width: 150px;
  height: 150px;
  background-color: green;
  border: 1px solid #000000;
  }
  //子组件js文件，在methods中声明方法
  methods: {
    close(){
      console.log(!this.data.isShow);
      this.triggerEvent('myEvent',!this.data.isShow)
    }
  }
  

  2、在父组件页面文件用:bind:子组件的事件名=父组件事件名

  //wxml
  <view bindtap="childisShow">开启</view>
  <my-component wx:if="{{isShow}}" bind:myEvent="closechild"></my-component>
  </view>
  //js
  closechild(val){
  //val打印出来的是事件对象，不能直接用val赋值，需要用val.detail才能拿到子组件传递过来的值
    this.setData({
      isShow:val.detail
    })
  }