uni-app开发小程序，如何手动触发click或者其他事件

一直以来习惯于直接用$("#xxx").on("click",function(){})来监听click事件或其他事件。作为小程序以及vue新手，用uni-app开发，该如何操作？

首先找uni-app官方文档或者售后群，官方助手已经说明，,用this.$refs这种方式是不行的。官方文档也没有明确说怎么整。搜索引擎也没满意的答案，如此情况，只能自己研究，先实现功能。

采用以下方法可以实现，利用$emit(个人觉得vue的作者应该参考了Qt的信号与槽)在子组件中定义，在父组件中接收(@xx=""的形式,例如@doGetWxPhoneNumber="doGetWxPhoneNumber")可以实现，代码示例如下：

/**
  * @author cure
  * @Date: 2021-4-28 22:45:30
  * @Description: 自定义组件文件: c-refbtn.vue
  * @FilePath:
  * @Email: contacteml@qq.com
  */
 
<template>
	<button class="loginAuth" lang="zh_CN" @click="$emit('handlerClickRefBtn')"  v-bind:open-type="openType" @getphonenumber="$emit('doGetWxPhoneNumber', $event, $data)">
		{{ refBtnMsg }}
	    <slot></slot>
	   </button>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		method: {
		},
		props: {
			refBtnMsg: {
				type: String,
				//非必填
				require: false
			},
			openType: {
				type: String,
				//必填
				require: true	
			}
		}
	}
</script>

<style scoped>
	.loginAuth {
		width: 80%;
		height: 50rpx;
		color: #FFFFFF;
		background-color: #015293;
		margin-top: 30rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 50rpx;
	}
</style>

 

在父组件中这样用：

// 部分代码如下：
<template>
			<checkbox-group @change="loginAuthAgreeChange">
	            <checkbox value ='0' :checked="argeeClick" class="loginAuth-agree text-margin-left"></checkbox>
				<label class="loginAuth-text">
					<view class="loginAuth-agree">我已认真阅读并同意</view>
					<navigator url="../doc/userAgreement" class="loginAuth-agree loginAuth-agree-label">《用户协议》</navigator>
				</label>
			</checkbox-group>
<view>
   <c-refbtn @tap="loginBind" @handlerClickRefBtn="handlerClickRefBtn" @doGetWxPhoneNumber="doGetWxPhoneNumber" :openType="openType" :argeeClick="argeeClick" :refBtnMsg="cRefBtnMsg" />
</view>
</template>

<script>
	export default {
		data() {
			return {
				cRefBtnMsg: "进行绑定",
				argeeClick: false,
				openType: ""
			}
		},
		onLoad(e) {
			var that = this;
		},
		methods: {
            handlerClickRefBtn: function(e) {},
	        loginAuthAgreeChange: function(e) {
				var that = this;
				this.argeeClick = this.argeeClick === true ? false : true;
				if (this.argeeClick) {
					this.openType = "getPhoneNumber";
					this.login().then(() => {
					}).catch(() => {
					    this.toast('服务器出小差啦');
					})
						
				} else {
					this.openType = "";
				}
			},
			loginBind: function(e) {
				var that = this;
				if (!that.argeeClick) {
					this.openType = "";
					uni.showModal({
						title: "注意",
						content: "如需进行绑定，请认真阅读相关协议并点击同意",
						// icon: "none",
						// duration: 2000
					});
				}
			}, 
            //自定义对应的实现函数
			doGetWxPhoneNumber(e) {
			    if (!this.argeeClick || 
                  e.detail.errMsg=="getPhoneNumber:fail user deny") {
			        return;
			    }
				this.getUserInfo().then(() => {
				})
			}
		}
	}
</script>

 

经验证，可以实现功能。

如果有更优的实现方式，请评论告知。