关于vue自定义事件中，传递参数的一点理解

例如有如下场景

<!-- 父组件 -->
<template><div><!--我们想在这个dealName的方法中传递额外参数name --><test-son v-for="item in list" @dealName="todo(item.name, arguments)" :item="item"></test-son></div>
</template><script>export default {name: 'test-p',data() {return {list: [{name: '小王'}, {name: '小刚'}]}},methods: {todo(name, data) {console.log(name);console.log(data)}}}
</script>
<!-- 子组件 -->
<template><div><button @click="sendData">发射{{item.name}}</button></div>
</template><script>export default {name: 'test-s',props: ['item'],methods: {sendData() {this.$emit('dealName', '王老吉');}}}
</script>当我们点击子组件button的时候就会打印对应的  xxx, 王老吉

接下来分析一下上述代码运作原理。
在vue官网上面有个在线模板编译

当我们给模板上的自定义事件添加额外参数的时候，我们的绑定函数就会被包裹上一层代码，function($event){xxx}
上述函数在子组件中emit的时候被调用，可以理解为 var dealName = function($event){xxx}
dealName.apply(vm, args);这其中由于事件函数在初始化的时候就进行了bind，所以在函数中this指向的是父组件的实例，而args则是$emit中传递的参数，所以在父组件中模板中通过argumens可以获取所有子组件emit的参数

关于vue自定义事件中，传递参数的一点理解相关推荐

[vue] vue自定义事件中父组件怎么接收子组件的多个参数？
[vue] vue自定义事件中父组件怎么接收子组件的多个参数? 子组件传递多个参数,父组件用展开运算符获取个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...
vue 点击事件传递多个参数_Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
vue 自定义事件传入额外参数
<div @click="myClick">我是子组件内容<div>//子组件自定义事件 myClick(){this.emit("childCl ...
vue 事件调用传参_Vue 事件如何传递参数？
Vue 事件如何传递参数? 事件函数参数传递: 普通参数和事件对象传递格式如下: 调用函数传参点秋香 vue事件绑定-参数传递实例如下: vue事件绑定-参数传递 xinbiancheng.cn { ...
浅谈Vue 自定义事件——原理及用法
前言在Vue 中,对HTML的原生事件做了支持.例如:click.focus.change等事件.除了原生事件外,Vue 还允许用户自定义事件. 什么是事件?什么是自定义事件? 在了解自定义事件前, ...
jQuery事件之传递参数
jQuery事件之传递参数转载▼ 我们经常使用jQuery中给DOM元素绑定事件来执行一些动态的功能,但是很少有人知道在jQuery中是如何来给DOM元素传递参数以及如何绑定自己定义的事件. ...
php 小程序页面传参,介绍小程序中传递参数的实现方法
这篇文章主要介绍了微信小程序参数传递详解的相关资料,需要的朋友可以参考下微信小程序的推出,无疑将会在移动互联网行业里再次掀起风浪. 有人会质疑小程序会不会火, 会不会火我不知道, 看微信的用户量即 ...
逆战Vue自定义事件
示例代码和demo: Vue.component('button-counter', {template: '<button v-on:click="increment"&g ...
解决JS在url中传递参数时参数包含中文乱码的问题
解决JS在url中传递参数时参数包含中文乱码的问题参考文章: (1)解决JS在url中传递参数时参数包含中文乱码的问题 (2)https://www.cnblogs.com/xushengguan/ ...
在setInterval函数中传递参数
本文翻译自:Pass parameters in setInterval function Please advise how to pass parameters into a function c ...

关于vue自定义事件中，传递参数的一点理解

关于vue自定义事件中，传递参数的一点理解相关推荐

最新文章

热门文章