小程序基础学习（组件通信）

介绍

????????点击子组件的按钮，把点击事件发送给页面

例如：点击这个“最大的一头猪”，由组件内部设置点击事件然后在传递给页面。

实现原理

?给组件内部需要点击的文本设置点击事件

在组件内部监听点击事件，并发送给页面点击事件的详细信息

?

在页面绑定这个点击事件触发后执行的事件

?

最后在页面中处理逻辑即可

组件代码

<view class="title">
<text class="texts">{{title}}</text>
</view>
<view class="conut">
<text class="number" bind:tap="onClick">{{conut}}</text>
</view>

// components/my-info/my-info.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:"标题"
    },
    conut:{
      type:String,
      value:"内容没有写哦"
    },
   
  },

  /**
   * 组件的初始数据
   */
  data: {
    
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onClick(){
      this.triggerEvent("onBtnClick","点击了详情")
    }

  }
})

/* components/my-info/my-info.wxss */
.texts{
  color: blue;
  font-size: large;

}
.number{
  color:chartreuse;
  font-size: larger;
}

{
  "component": true,
  "usingComponents": {}
}

页面代

<!--pages/five/five.wxml-->\
<navigation-bar title="牧原" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<my-info title="猪王" conut="最大的一头猪" bindonBtnClick="onBtnClickOut"></my-info>

// pages/five/five.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  onBtnClickOut(){
    console.log("你点了一下组件详情")
  },

})

/* pages/five/five.wxss */

{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar",
    "my-info":"/components/my-info/my-info"

  },
  "enablePullDownRefresh": true
}

?