微信小程序组件教程

将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

自定义组件由 json wxml wxss js 4个文件组成

首先需要在 json 文件中进行自定义组件声明，将 component 设为 true.

json 文件：

component 设为 true .

{ "component": true, }

js 文件：

Component({ properties: { // 这里定义了innerText属性，属性值可以在组件使用时指定 msgText: { type: String, value: 'hello world', } }, data: { // 这里是一些组件内部数据 someData: {} }, methods: { // 这里是一个自定义方法 catMethod: function(){} } })

这两个文件需要更改。

开始使用组件：

{ "usingComponents": { "component":"../../Components/component/index" } } <view> <component></component> </view>

往组件传值：

<view> <component msg="hello"></component> </view>

接下来，我们可以在组件中获取值并使用它。

<view> <view>{{msg}}</view> </view>

调用组件中的自定义方法：

为组件设置一个 id

<view> <component id="component" msg="hello"></component> </view>

使用 selectComponent 返回组件对象

var ac = this.selectComponent("#home") // 组件的自定义方法 ac.catMethod();

组件加载完成后执行：

我们可以使用 lifetimes 来监视组件是否已加载。

/** * 页面加载完成执行 */ lifetimes:{ ready(){ console.log("hello world") } }

子组件向父组件传值：

通过 triggerEvent 从子组件向父组件传值。

子组件：

this.triggerEvent('event', { value:123})

父组件：

bind 后的 event 要与子组件 triggerEvent 第一个参数 event 相同。

<view> <component id="component" bind:event="bindEvent"></component> </view> bindEvent(e){ console.log("子组件传来的值为",e) }

至此，它基本上包含了组件的所有操作。如果有遗漏或不清楚，欢迎指出。

demo 1：购物车

demo 2：3D 轮播图