微信小程序自定义组件-组件间通信与事件_小程序组件抛出事件

组件间通信

组件间的基本通信方式有以下三种。

• WXML 数据绑定：用于父组件向子组件的指定属性设置数据
• 事件：用于子组件向父组件传递数据，可以传递任意数据。
• 如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

WXML数据绑定 - 父传子

<！-- 组件 my-component.wxml–>
组件内部的标签

<!--components/my-component/my-component.wxml-->

<!-- WXML数据绑定 - 父传子 -->
<view>
  {
  {sayHello}}
  <slot></slot>
</view>
1
2
3
4
5
6
7
8

// 组件 my-component.js
这里定义一个属性sayHello 它是一个String 类型，父级页面可以通过它给子组件传入值

// components/my-component/my-component.js

  properties: {
   
    sayHello: String
  }
1
2
3
4
5
6
'
运行
运行

// 页面 index.json
在需要使用组件的页面引入组件 这项是必须的 。这里的my-component名字可以自己定义

{
   
  "usingComponents": {
   
    "my-component": "/components/my-component/my-component"
  }
}
1
2
3
4
5
6
7

//页面 index.js

  data: {
   
    hello: 'hello world!'
  },

1
2
3
4
5

<！-- 页面 index.wxml–>
在使用组件的页面中 可以调用组件中定义的属性 sa