微信小程序组件教程_this.selectcomponent用法

微信小程序组件教程

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

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

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

json 文件：

component 设为 true .

{
  "component": true,
}
1
2
3

js 文件：

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    msgText: {
      type: String,
      value: 'hello world',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    catMethod: function(){}
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这两个文件需要更改。

开始使用组件：

{
  "usingComponents": {
    "component":"../../Components/component/index"
  }
}
1
2
3
4
5

<view>
	<component></component>
</view>
1
2
3

往组件传值：

<view>
	<component msg="hello"></component>
</view>
1
2
3

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

<view>
	<view>{{msg}}</view>
</view>
1
2
3

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

为组件设置一个 id

<view>
	<component id="component" msg="hello"></component>
</view>
1
2
3

使用 selectComponent 返回组件对象

var ac = this.selectComponent("#home")

// 组件的自定义方法
ac.catMethod();
1
2
3
4

组件加载完成后执行：

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

  /**
  * 页面加载完成执行
  */
  lifetimes:{
     ready(){
       console.log("hello world")
     }
   }
1
2
3
4
5
6
7
8

子组件向父组件传值：

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

子组件：

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

父组件：

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

<view>
	<component id="component" bind:event="bindEvent"></component>
</view>
1
2
3

bindEvent(e){
	console.log("子组件传来的值为",e)
}
1
2
3

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

demo 1：购物车

demo 2：3D 轮播图