vue 自定义事件传参

先来简单看个例子：

TodoList.vue :

<template><ul><li><todo-itemv-for="item in list" :key="item.id":status="doneList.includes(item.id)":info="item"@click="changeStatus0"></todo-item></li><li><todo-itemv-for="item in list" :key="item.id":status="doneList.includes(item.id)":info="item"@click="changeStatus1()"></todo-item></li><li><todo-itemv-for="item in list" :key="item.id":status="doneList.includes(item.id)":info="item"@click="changeStatus2(item)"></todo-item></li><li><todo-itemv-for="item in list" :key="item.id":status="doneList.includes(item.id)":info="item"@click="changeStatus3(arguments, item)"></todo-item></li></ul>
</template><script>
import TodoItem from './TodoItem'
export default {name: 'TodoList',components: {TodoItem},data () {return {list: [{id: 0,name: 'zero',desc: 'zerozerozero'},{id: 1,name: 'one',desc: 'oneoneone'},{id: 2,name: 'two',desc: 'twotwotwo'}],doneList: [1]}},methods: {changeStatus0 (val, obj) {console.log(val)console.log(obj)},changeStatus1 (val) {console.log(val)},changeStatus2 (obj) {console.log(obj)},changeStatus3 (arr, obj) {console.log(arr)const val = arr[0]if (val) {const index = this.doneList.indexOf(obj.id)this.doneList.splice(index, 1)} else {this.doneList.push(obj.id)}}}
}
</script>

TodoItem.vue :

<template><label @click="changeStatus"><span>{{ info.name }}: {{ status }}</span></label>
</template><script>
export default {name: 'TodoItem',props: {status: {type: Boolean,default: false},info: {type: Object,default () {return {}}}},methods: {changeStatus () {this.$emit('click', this.status, this.info)}}
}
</script>

changeStatus0 打印的是TodoItem.vue中 $emit 后跟的两个参数。
changeStatus1 打印的是 undefined。
changeStatus2 打印的是 v-for 循环中的当前 item 对象。
changeStatus3 中 arr 参数对应 $emit 后跟的两个参数，item 参数对应 v-for 循环中的当前 item 对象，注意 template 中的写法 @click="changeStatus3(arguments, item)"，按照 changeStatus3 的方式可以实现多种方式的混合传参。

vue 自定义事件传参相关推荐

vue 事件调用传参_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
click传值vue_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
小程序 | 小程序中常用的事件 + 事件对象的属性列表 +小程序事件传参 + 小程序全局配置 + 小程序页面配置 + 小程序发起网络数据请求
文章目录一.WXML 模板语法数据绑定事件绑定 ⭐小程序中常用的事件 ⭐事件对象的属性列表 target 和 currentTarget 的区别 bindtap 的语法格式在事件处理函数中为 ...
【微信小程序-原生开发】实用教程09 - 可滚动选项，动态列表-步骤条（含事件传参），动态详情（含微信云查询单条数据 doc）
开始前,请先完成圆梦宝典中滚动公告栏的开发,详见 [微信小程序-原生开发]实用教程 08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据 ...
【Ant Design Pro 四】react 点击事件传参
简单的绑定点击事件传参: 点击事件 function myClick(){console.log('点击')}return (<Button onClick={myClick}>点击< ...
[vue] vue自定义事件中父组件怎么接收子组件的多个参数？
[vue] vue自定义事件中父组件怎么接收子组件的多个参数? 子组件传递多个参数,父组件用展开运算符获取个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...
uni-app的事件传参
uni-app的事件传参,和微信方式类似,需要先定义data-,再在函数中获取 <div @click="handleClick" data-big-dog='大狗子'> ...
微信小程序事件传参
微信小程序事件传参 wxml部分 js 部分 wxml部分 1.先绑定事件 2.在该元素上写上属性 data-index 3.参数值即为要传参数 <text catchtap="de ...

vue 自定义事件传参

vue 自定义事件传参相关推荐

最新文章

热门文章