微信小程序组件间通讯

1.父传子

1.1父组件

1.1.1wxml文件

<!-- 定义的my-props组件 -->
<my-props count="{
   
   {count}}"></my-props>
<!-- 分割线 -->
<view></view>
<view>父组件的count值:{
   
   {count}}</view>
<button bindtap="addChange">+1</button>

1.1.2静态页面 

 

1.2子组件

1.2.1js文件

说明：接受父组件传来的数据

  properties: {
    count: Number
  },

1.2.2wxml文件

<view>子组件收到count:{
   
   {count}}</view>

1.2.3界面展示

 

2.子传父

说明：子传父也就是给子组件标签绑定一个自定义函数。

2.1父组件wxml文件

<my-emit bind:fredom="asyncfredom"></my-emit>
<view>父组件：{
   
   {name}}</view>

说明：父组件绑定自定义函数，函数名为asyncfredom。

2.2子组件wxml文件

<view>子组件：{
   
   {name}}</view>
<button bindtap="sendMessage">点击我向父组件发送数据</button>

2.3子组件js文件  

  data: {
    name: "李四"
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 触发自定义事件
    sendMessage() {
      this.triggerEvent("fredom", {
        name: this.data.name
      })
    }
  }
})

说明：触发自定义事件向父组件传递数据 。 

 2.4.父组件js文件

    data: {
    name: ""
  },
asyncfredom(e) {
    console.log(e);
    this.setData({

      name: e.detail.name
    })
  },

2.5界面展示

点击后

扫描二维码关注公众号，回复： 15544363 查看本文章