微信小程序的自定义组件与组件通信

1、创建组件

  1. 在根目录创建一个components文件夹用来存放所有自定义的组件。
  2. 在components文件夹下创建一个新文件夹,在这个文件夹下定义组件。
  3. 新文件夹在新文件夹下新建一个component组件。
  4. 在组件的.json文件中将component属性定义为true,声明这是一个组件。(第三步创建component页面时会自动生成)

2、在父页面中使用组件

  1. 父组件的.json文件中,在usingComponents属性下定义一个组件名用来在页面中使用。
  2. 在父页面中将定义的组件名以标签的形式使用。

 

 3、将父页面的数据传给子组件

  1. 在父页面.js中定义一个变量。

  2. 将父组件定义的数据绑定一个自定义属性在组件上。

  3. 将父页面定义的属性在子组件声明数据类型。

  4. 然后就能在组件中使用父组件的数据了。

 4、将子组件的数据传给父页面

  1. 在子组件定义一个数据。

  2. 在父页面使用的子组件标签内自定义一个事件用来调用父组件的方法。

  3. 在子组件的事件内使用this.triggerEvent('父组件事件名', {})调用父页面的事件将数据进行发送。

  4. 在父页面的事件内接收子组件的数据。

 

 5、完成

  1. 在子组件定义的数据可以在父页面使用。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值