微信小程序开发系列-11组件间通信02

微信小程序开发系列目录

《微信小程序开发系列-01创建一个最小的小程序项目》
《微信小程序开发系列-02注册小程序》
《微信小程序开发系列-03全局配置中的“window”和“tabBar”》
《微信小程序开发系列-04获取用户图像和昵称》
《微信小程序开发系列-05登录小程序》
《微信小程序开发系列-06事件》
《微信小程序开发系列-07组件》
《微信小程序开发系列-08自定义组件模版特性》
《微信小程序开发系列-09自定义组件样式特性》
《微信小程序开发系列-10组件间通信01》

文章目录

微信小程序开发系列目录
前言
behaviors
- behaviors的定义
- behaviors的使用
- - 引用外部behaviors
  - 引用内置behaviors
  - - wx://form-field
    - - 普通页面form组件的submit
      - 自定义组件中form组件的submit
- 小结
selector
- 什么是selector
- selector的使用
获取组件实例
总结

前言

上一篇文章中将组件间通信还有一个模块没有学习到，本文继续学习。

behaviors

behaviors 是用于组件间代码共享的特性。

behaviors的定义

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

详细的参数含义和使用请参考 Behavior 参考文档。

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

behaviors的使用

使用 Component 构造器来构造页面的一个好处是可以使用 behaviors 来提取所有页面中公用的代码段。

组件既可以使用外部引入的behavior，也可以使用内置的behavior。

引用外部behaviors

编写一个behaviors.js文件，注册一个Behavior对象并导出；
在自定义组件的mytag.js文件导入Behavior对象，然后将导入的Behavior对象填入component的behaviors定义段中；
在mytag.wxml中简单绑定自定义组件mytag的属性、data 以及 Behavior对象的属性、data；

// mybehavior.js
module.exports = Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String,
      value: 'myBehaviorProperty'
    }
  },
  data: {
    myBehaviorData: 'myBehaviorData'
  },
  methods: {
    myBehaviorMethod: function(){}
  }
})

// components/mytag/mytag.js
var myBehavior = require('./mybehavior')
Component({
  behaviors:[myBehavior],
  properties: {
    myTagPro:{
      type:String,
      value: 'myTagPro'
    }
  },
  data: {
    myData:'mytag-data'
  },
  methods: {
  }
})

<!--components/mytag/mytag.wxml-->
<view>
  <view>{{myTagPro}}</view>
  <view>{{myData}}</view>
  <view>{{myBehaviorProperty}}</view>
  <view>{{myBehaviorData}}</view>
</view>

请添加图片描述

通过运行结果可以看出，mytag.wxml可以直接使用myBehavior中的property和data；即被“合并”到mytag组件中了。

引用内置behaviors

自定义组件可以通过引用内置的 behavior 来获得内置组件的一些行为。

wx://form-field

使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件，并在 submit 事件中返回组件的字段名及其对应字段值。
详细用法以及代码示例可见：form 组件参考文档

首先我先演示下普通页面中form组件的submit的步骤和效果，作为对比，然后看自定义组件中form组件的submit的实现步骤。

普通页面form组件的submit

<!--index.wxml-->
<form bind:submit="formSubmit">
  <text>表单</text>
  <input name='姓名' placeholder="请输入姓名"></input> <!--name作为表单提交时的key,支持中文-->
  <input name='密码' placeholder="请输入密码" password="true"></input>
  <button form-type="submit">提交</button>
</form>

// index.js
Page({
  data:{
    name:"sif_666",
    password:"123456"
  },
  formSubmit: function(e) {
    console.info('表单提交携带数据', e.detail.value)
  }
})

当点击 form 表单中 form-type 为 submit 的 button 组件时，会将表单中input组件中的 value 值进行提交，需要在input组件中加上 name 来作为 key。运行效果如下：

请添加图片描述

自定义组件中form组件的submit

<!--index.wxml-->
<form bind:submit="formSubmit">
  <text>自定义组件表单演示</text>
  <custom-form-field name="custom-name"></custom-form-field>
  <button form-type="submit">提交</button>
</form>

// index.js
Page({
  data:{
    name:"sif_666",
    password:"123456"
  },
  formSubmit: function(e) {
    console.info('表单提交携带数据', e.detail.value)
  }
})

<!--custom-form-field.wxml-->
<input class="cus_input" placeholder="请输入姓名" value="{{cus_name}}" bindinput="onChange" ></input>

Component({
  behaviors: ['wx://form-field'],
  data: {
    cus_name: ''
  },
  methods: {
    onChange: function (e) {
      console.log(e)
      this.setData({
        cus_name: e.detail.value, // 更新cus_name的值
        value: e.detail.value, //更新"wx://form-field"中value的值
      })
    }
  }
})

由behavior的定义，我们知道，behaviors 是用于组件间代码共享，当组件引用它时，它的属性、数据和方法会被合并到组件中。因此，form的data的value，也被合并到custom-form-field组件的data中；所以，当点击提交按钮后，在onChange方法中执行this.setData ({value: e.detail.value})将input中输入的数据传递给了index页面的form组件，并在index.js中的formSubmit函数中打印出来。运行结果如下：

请添加图片描述