原理：组件内部设置点击事件，然后冒泡到页面捕获点击事件
在组件内部设置点击事件
处理点击事件，并告诉页面
页面捕获点击事件
文章来源：https://www.toymoban.com/news/detail-791376.html
页面处理点击事件
文章来源地址https://www.toymoban.com/news/detail-791376.html
组件代码
<!--components/my-info/my-info.wxml-->
<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": {}
}页面代码
<navigation-bar title="牧原" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<my-info title="猪王" conut="最大的一头猪" bindonBtnClick="onBtnClickOut"></my-info>
// pages/five/five.js
Page({
onBtnClickOut(){
console.log("你点了一下组件详情")
}
})到了这里，关于小程序基础学习（事件处理）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
