小程序自定义组件的使用

转载 _蛰伏 2020/3/20 4:01:30

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

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

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

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

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

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

点击查看更多内容
随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[小程序自定义组件的使用]http://www.zyiz.net/tech/detail-119981.html

上一篇:我的第一个微信小程序

下一篇:疫情下互联网又遇“荒年”?有人被迫降薪,可仍有人逆势王者!

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    扫一扫关注最新编程教程