继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

小程序自定义组件的使用

_蛰伏
关注TA
已关注
手记 6
粉丝 8
获赞 12

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

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

(一)、自定义组件怎么设置

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

要编写一个自定义组件,需要在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); // 获取值
}

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

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP