小程序自定义组件的使用

最新在研究小程序自定义组件的时候，发现这个还蛮方便的，所以现在总结一下呗，小程序自定义组件主要分为四个方面：

• 自定义组件怎么设置？
• 自定义组件怎么引用？
• 父子组件是怎样进行通信的？

（一）、自定义组件怎么设置

小程序的开发文档中也有写有,我这里引用的是小程序开发文档中的一段话来着：

要编写一个自定义组件，需要在json 文件中进行自定义组件声明，将 component 属性设置为 true 那么这一组组件设为自定义组件。

// 我是自定义组件中的json文件
{
	"component": true
}

（二）、自定义组件怎么引用？

父组件怎么引入自定义组件呢？首先我们需要在父组件json的文件中，在usingComponents 对象中引入自定义组件的路径：

{
	"usingComponents": {
		"slide-component": "/components/ad-info-component/ad-info-component"
	}
}

我这里是在根目录下，新建一个components 的文件夹，在该文件夹下放置自定义组件，效果如下：

然后我们在wxml 文件中，引入在json 文件中定义的引入的路径文件的别名，在wxml 文件的引入效果如下：

（三）、父子组件是怎样进行通信的？

我们在父组件wxml文件中，引入的自定义组件，加上一个自定义的属性，然后这个属性值就是传递需要传递的值，具体的实现代码如下：

<view class="ad-info">
	<ad-info-component adinfors="{{adDetail.info}}"/>
</view>

这里的adinfors 是我自定义的属性，属性后面的就是属性值

接下来我们就在子组件js 文件中接受刚刚自定义的属性值，首先我们需要在子组件中的，定义adinfors属性的类型，

Component({
  /**
   * 组件的属性列表
   */
  properties: {
	adinfors: {
		type: String, // 因为我传递的是一个字符串
		value: ''
	}
  },
 })

最后就是在页面中需要的位置进行引入：

<text class="header-title">{{adinfors}}</text>

触发事件

自定义组件触发事件时，需要使用到triggerEvent 方法，指定事件名，detail对象和事件选项

<!-- 在自定义组件中使用 -->
<text bindtap="clickMe"></text>

自定义组件中的js 文件：

Component({
  properties: {}
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('clickMe', myEventDetail, myEventOption)
    }
  }
})

父组件中进行接收：

<view class="ad-info">
	<ad-info-component adinfors="{{adDetail.info}}" bindclickMe="clickMeEvent"/>
</view>

clickMeEvent(e){
	console.log(e.detail); // 获取值
}

好了，到这里就结束的了，感觉有点乱，将就着看吧。