微信小程序学习四之 自定义组件 及 组件间通信

微信小程序自定义组件类似于页面，一个自定义组件由wxml、wxss、js、json文件组成。

一、快速创建组件

可在微信开发者工具中快速创建组件的文件结构，选中components文件夹，右键选择“新建Component”，输入组件名，将生成组件的文件结构。

二、声明组件

在组件的json文件中，对组件进行声明

{
  "component": true
}

三、组件内容分析

• wxml和页面文件相同，书写标签结构，同时可以通过<slot></slot>标签用于占位，和vue类似，父组件可以使用任何内容代替<slot>标签。
• js文件
  在组件的js文件中，需要使用Component()来注册组件，而非Page()，通过properties可以声明父组件传过来的数据，相当于vue中的props属性
• wxss文件
  在组件中应该使用类名选择器，组件内声明的样式只在该组件内生效。

四、父组件向子组件传值

// 子组件 child.wxml
<view>
	<view>这是子组件的内容</view>
	<view>这是父组件传过来的内容：{{msg}}</view>
	// 占位符
	<slot></slot>
<view>

// 子组件 child.js
Component({
	properties: {
		msg: {
			type: String,
			value: ''	// 默认值
		}
	},
	data: {
	},
	methods: {
	}
})

// 父组件 parent.json，引入子组件
{
  "usingComponents": {
    "child": "../../components/child/child"
  }
}

// 父组件 parent.wxml
<view>
	<child msg="{{message}}">
		<view>这是用来替换slot的内容</view>
	<child>
</view>

// 父组件 parent.js
Page({
	data: {
		message: 'hello child'
	}
})

五、子组件向父组件传值

微信小程序和vue相同，通过事件触发实现父子组件之间的通信。
子组件通过 this.$triggerEvent('事件名', 参数值) 触发；
父组件在wxml中通过 bind+事件名 监听

// 子组件 child.wxml
<view>
	<button bindTap="emitParentEvent">点击触发</button>
</view>

// child.js
methods: {
	emitParentEvent(){
		this.$triggerEvent('emitevent', {message: '这是要传给父组件的消息'})
	}
}

// 父组件parent.wxml
<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 -->
<child bindemitevent="onMyEvent" />
<!-- 或者可以写成 -->
<child bind:emitevent="onMyEvent" />

// 父组件parent.js
methods: {
	onMyEvent(e){
		console.log(e.detail)
	}
}

这是关于微信小程序自定义组件较为基础的介绍，下篇将介绍小程序的生命周期。