微信小程序组件间通信与事件

微信小程序组件间通信与事件

如何定义组件并使用？

创建自定义组件

自定义组件_官网指南

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。

• 首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

{
  "component": true
}

• 在 wxml 文件中编写组件模板

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

• 在 wxss 文件中加入组件样式。写法与页面的写法类似，参考组件和模板样式

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

使用自定义组件

• 首先要在页面的 json 文件中进行引用声明

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

• 在页面的 wxml 中使用自定义组件。节点名即自定义组件的标签名，节点属性即传递给组件的属性值。

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

组件间通信

微信小程序组件间通信与事件_官网指南

组件间的基本通信方式有以下几种。

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

监听事件

方式一：

WXML 数据绑定：用于父组件向子组件的指定属性设置数据

1. 自定义组件中

 <!-- 页面展示为：  接收父组件值：今天想吃什么？-->
<button>接收父组件值： {{content}}</button>

• 注意: Boolean类型使用时需要加{{}}， 否则解析成字符串

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        // 数据源
        content: {
            type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
            value: '我是用来接收父组件传过来的值' //默认值
        },
        
        // 或者可以写成
        content: String,
    },

})

2. 引用组件中

<media-list
     content="今天想吃什么？"
	>
</media-list>

方式二：

用于子组件向父组件传递数据，可以传递任意数据。

1. 自定义组件中

<button bindtap="onTap" data-items='{{item}}'>点击这个按钮将触发“eventTap”事件</button>

• 传递当前点击触发的数据

onTap: function(e) {
	//获取当前点击数据
    let currentVal = e.currentTarget.dataset.items;
    var myEventDetail = {
        currentData: currentVal
    } // detail对象，提供给事件监听函数
    var myEventOption = {} // 触发事件的选项
    this.triggerEvent('eventTap', myEventDetail, myEventOption)
}

2. 引用组件中

<media-list
     dataSource="{{mediaListData}}"
     bind:eventTap="executeTap"
	>
</media-list>

• 父组件中获取子组件传过来的数据

executeTap: function(e) {
    console.log(e.detail.currentData);
}

方式三：

通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法

1. 自定义组件中

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

• 自定义组件触发事件时，需要使用 triggerEvent 方法

Component({
    properties: {},
    methods: {
        onTap: function(){
            this.triggerEvent('eventTap')
        }
    }
})

2. 引用组件中

• 定义选择器，用于获取组件。

<media-list id="mediaCommpents"
    dataSource="{{mediaListData}}"
    >
</media-list>

• 在onReady()方法中获取组件实例

onReady: function () {
    // 获取自定义组件, 访问组件的任意数据和方法
    this.commpents = this.selectComponent('#mediaCommpents');
    console.log(this.commpents); 
},