小程序自定义组件用法详解

微信小程序自定义组件内容可见--小程序自定义组件

自定义组件编写过程：

目标：实现一个WEUI 中的弹窗组件。

先来一个热身，让自定义组件在页面中通过按钮点击事件展现出来。

步骤1：在小程序根目录下新建一个文件夹--component，用来放置所有自定义组件。文件夹下新建一个Dialog文件夹放置弹窗组件内容，组件也有js,json，wxml，wxss四个文件组成

步骤2：配置

我们需要声明自定义组件，也就是将 dialog.json 中 component 字段设为 true ：

{
  "component": true,
  "usingComponents": {} 
}

注意：在json文件下，不能有注释语句。如果有注释，最后会报错。

在dialog.wxml里编写组件的内容，组件模板和页面模板类似，直接贴代码，这里用了slot插槽，下面再讲

<!--component/dialog/dialog.wxml-->
<!-- 这是自定义组件的内容 -->
<view class='wx_dialog_container' hidden="{{!isShow}}">
    {{innerText}}
    <!-- 这是slot插槽 -->
     <slot></slot>
</view>

步骤3：编写自定义组件的JS文件

扫描二维码关注公众号，回复： 5741366 查看本文章

dialog.js 是自定义组件的构造器，是使用小程序中 Component 构造器生成的，调用 Component 构造器时可以用来指定自定义组件的属性、数据、方法等，具体的细节可以参考一下官方的文档

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  properties: {
    // 弹窗标题
    title: {            // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    innerText:{
      type:String,
      value:'这是一个自定义弹窗'
    }
  },

  /**
   * 私有数据,组件的初始数据
   * 可用于模版渲染
   */
  data: {
    // 弹窗显示控制
    isShow: false
  },

  /**
   * 组件的方法列表
   * 更新属性和数据的方法与更新页面数据的方法类似
   */
  methods: {
    /*
     * 公有方法
     */

    //隐藏弹框
    hideDialog() {
      this.setData({
        isShow: !this.data.isShow
      })
    },
    //展示弹框
    showDialog() {
      this.setData({
        isShow: !this.data.isShow
      })
    },
    /*
    * 内部私有方法建议以下划线开头
    * triggerEvent 用于触发事件
    */
    
  }
})

步骤4：在页面中引入组件

4.1、首先在index.json页面引入组件路径。

{
  "usingComponents": {
    "dialog": "/component/Dialog/dialog"
  }
}

4.2、在index.wxml页面中引入组件

<view class="container">
    <dialog id='dialog'>
      <view>这是插槽slot内容</view>
    </dialog>
    <button type="primary" bindtap="showDialog"> ClickMe! </button>
</view>

4.3、在index.js中定义事件

在index.wxml页面中，给自定义组件dialog设置的id属性为dialog,在index.js中，通过this.selectComponent("#dialog");方法来获取这个组件的实例节点。index.js文件代码如下：

//index.js
//获取应用实例
const app = getApp()

Page({

  /**
 * 生命周期函数--监听页面初次渲染完成
 */
  onReady: function () {
    //获得dialog组件
    this.dialog = this.selectComponent("#dialog");
    console.log(this.dialog)
  },

  showDialog() {
    this.dialog.showDialog();
  },

  //取消事件
  _cancelEvent() {
    console.log('你点击了取消');
    this.dialog.hideDialog();
  },
  //确认事件
  _confirmEvent() {
    console.log('你点击了确定');
    this.dialog.hideDialog();
  }

})

接下来点击按钮就可以将组件的内容展现出来了

上面是一个比较简单的自定义组件。有几个知识需要介绍介绍。

slot

Component的slot（slot意思是插槽），主要是让你在外部的wxml可以自由的在你的Component的wxml里插入模块。默认情况下，一个组件的wxml只可能有一个slot。需要使用多个时，可以在组件js中声明启用。

更多内容请看官方文档--slot

组件与数据通信

组件间的通信方法有以下几种：·

WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。具体在组件模板和样式章节中介绍。
事件：用于子组件向父组件传递数据，可以传递任意数据。
如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

通过在页面中给组件加了一个id值，这样子我们就能查到组件的方法了。

<compontent id="modal"></compontent>

/*js*/
var modal = this.setlectComponet('#modal');

这样子就能在外面调用组件里面的任意数据和方法了。·

properties：主页面传入数据到组件，相当于Vue的props，是传入外部数据的入口。
data：则用于组件的内部数据变化，外部数据没法初始化

在 properties 定义段中，属性名采用驼峰写法（propertyName）；在 wxml 中，指定属性值时则对应使用连字符写法（component-tag-name property-name="attr value"），应用于数据绑定时采用驼峰写法（attr="{{propertyName}}"）·

传入的数据，不管是简单数据类型，还是引用类型，都如同值复制一样

组件传出数据到主页面

组件间交互的主要形式是自定义事件。·

组件通过 this.triggerEvent() 触发自定义事件，主页面在组件上 bind:myevent="onMyEvent" 来接收自定义事件。

其中，this.triggerEvent() 方法接收自定义事件名称外，还接收两个对象，eventDetail 和 eventOptions。

<!-- 在自定义组件中 -->
<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({
  properties: {}
  methods: {
    // 子组件触发自定义事件
    ontap () {
    // 所有要带到主页面的数据，都装在eventDetail里面
    var eventDetail = {
            name:'sssssssss',
            test:[1,2,3]
    }
    // 触发事件的选项 bubbles是否冒泡，composed是否可穿越组件边界，capturePhase 是否有捕获阶段
    var eventOption = {
            composed: true
    }
    this.triggerEvent('myevent', eventDetail, eventOption)
    }
  }
})

触发的事件---官方文档Component

监听事件

自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。监听自定义组件事件的方法与监听基础组件事件的方法完全一致：·

在Page事件中监听组件中传递过来的值。

Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的detail对象
  }
})

behaviors

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的“mixins”或“traits”。·

每个 behavior 可以包含一组属性、数据、生命周期函数和方法，组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior 。 behavior 也可以引用其他 behavior 。

// my-behavior.js
module.exports = Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String
    }
  },
  data: {
    myBehaviorData: {}
  },
  attached: function(){},
  methods: {
    myBehaviorMethod: function(){}
  }
})

组件引用时，在 behaviors 定义段中将它们逐个列出即可。

// my-component.js
var myBehavior = require('my-behavior')
Component({
  behaviors: [myBehavior],
  properties: {
    myProperty: {
      type: String
    }
  },
  data: {
    myData: {}
  },
  attached: function(){},
  methods: {
    myMethod: function(){}
  }
})