uni-app按钮绑定及传参

uni-app是什么?
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
Uni-app的优势
跨平台更多,真正做到一套代码多端发行,支持原生代码混写和原生sdk集成。
运行体验更好。组件、api与微信小程序一致,兼容weex原生渲染。
通用技术栈,学习成本更低。Vue的语法,微信小程序的api,对于前端开发人员来说更容易上手。
开放生态,组件更丰富。支持通过npm安装第三方包;支持微信小程序自定义组件及sdk;兼容mpvue组件及项目;app端支持与原生混合编码;
事件定义和传参
    在uni中定义事件的方式和vue中是一致的,可以通过v-on的方式定义事件,也可以通过@进行事件的定义,传参方式也与vue一致。
定义事件
给按钮绑定点击事件
    <button type="default" @click="handleEvent">点击事件</button>
在script中声明点击事件
export default {
        data() {
            return {
                title: 'Hello tledu'
            }
        },
        onLoad() {

        },
        methods: {
            handleEvent(e) {
                console.log("点击了按钮")
                console.log(e)
            }
        }
    }
    我们可以很惊喜的发现,这里与我们熟悉的vue中的事件定义是完全一致的,这里的形参e就是事件元数据。
获取event数据

在这里我们就会遇到这样的一个问题,我们进行事件传参之后就无法获取到事件元数据了,如果我们需要获取到事件元数据,需要使用$event,将事件元数据传递过来。
<button type="default" @click="handleEvent('天亮教育',$event)">点击事件</button>
    
handleEvent(name,e) {
    console.log("点击了按钮")
    console.log(name)
    // 事件元数据
    console.log(e)
}

猜你喜欢

转载自blog.csdn.net/m0_63349753/article/details/127560207
今日推荐