vue组件踩坑笔记之$emit事件传参

最新推荐文章于 2024-02-26 13:50:31 发布
最新推荐文章于 2024-02-26 13:50:31 发布
阅读量4k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jaquechen/article/details/97033343
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="test-multiple">
        <test-button
            v-on:test="sayHi">
        </test-button>
    </div>
</body>
    <script>
        Vue.component('test-button',{
            props: [],
            template:`
                <button
                    v-on:click="$emit('test','[测试,123]')">
                    点击我切换函数，换个皮囊。
                </button>
            `,
            data () {
                return {
                    
                }
            },
            methods: {
                otherContent:function(){}
            }
        })
        new Vue({
            el:'#test-multiple',
            methods:{
                sayHi:function(s){
                    alert(s)
                }
            }
        })
    </script>
</html>

总觉得那地方不对劲，如有其他见解望周知谢谢！子组件可以通过调用内建的$emit()方法并传入一个时间名称来触发一个事件。  v-on:click="$emit('test','[测试,123]')">   如上： test是事件名，数组[测试，123]是参数  此时父组件的v-on监听器监听子组件的事件  <test-button
            v-on:test="sayHi">
        </test-button>

并传给父组件函数处理 

sayHi:function(s){
                    alert(s)
                }

是不是很像v-bind，特别经典。

星辰志
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue组件之传递数据
xkshihaoren的博客
10-15 167
1.父组件传递数据到子组件 第一种：使用计算属性 原理： 首先，父组件定义在子组件标签上的值会存放到子组件实例的$attr属性上，然后就可以根据这个属性使用计算属性的方式来获取它 其次，定义在子组件标签上的值同时也会放在template的根dom元素上，在本例中也就是div，这也是vue在定义组件的时候必须只有一个根元素的原因 <html> <head></head...
vue中使用$emit传递参数
bianenhui91的专栏
02-26 663
【代码】vue中使用$emit传递参数。
Vue3里通过props和emit进行父子组件传递数据的心得
qq_37635012的博客
10-09 5040
vue3父子组件通信，vue3里props使用，vue3里emit使用
Vue 父组件向子组件传递方法（事件）子组件通过$emit 来触发父组件中的一个事件
KLW75
01-09 4527
Vue 父组件向子组件传递方法 基本步骤有两步 1、是在父组件中，通过 v-on 自定义事件传递给组组件 2、在子组件中通过 this.$emit( ) 触发父组件的方法。 父组件 < test @父组件绑定的名称=‘父组件触发的方法’> 子组件 this.$emit('父组件中绑定的名称') ...
Vue3/ defineEmit传递 普通数据类型 和 复杂数据类型 介绍 、父组件传递数据给子组件 子组件将数据存储data 存储数据不更新
m0_64494670的博客
01-08 1139
Vue3/ defineEmit传递 普通数据类型 和 复杂数据类型 介绍 、父组件传递数据给子组件 子组件将数据存储data 存储数据不更新
vue---component2---组件传参2 之 子传父-事件派发emit和自定义事件（父组件向子组件传、子组件向父组件传、非相关组件之间传参）
DcTbnk的博客
07-09 430
一、自定义事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>自定义事件</title> </head> <body>
vue组件之间传参方式
yu_yu_lll的博客
07-15 552
组件之间传参方式
vue 非父子组件传值 事件总线 $on $emit 新手踩过的坑及解决方法
weixin_52190942的博客
05-18 1120
vue 非父子组件传值 事件总线 $on $emit 新手踩过的坑及解决方法 vue 非父子组件传值 事件总线 $on $emit 新手踩过的坑及解决方法 基本语句 Vue.prototype.bus = new Vue()// 在 Vue 的prototype挂载了一个bus属性 //触发事件 传值 this.bus.$emit('change', this.name)// 通过$emit向外层触发事件并传递参数；第一个参数是事件名字随便起但需跟$on中的事件名字一样 // 监听事件 接收值 thi
vue-组件间传参实验-v-on+$emit
xie__jin__cheng的博客
10-17 309
1.实验1 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>传参测试</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app">
vue 使用$emit 相父组件传递参数的回调函数
热门推荐
quKbin的博客
12-25 1万+
  *** 子组件中的 this.$emit('done ', someDdata) --done为父组件跳转子组件dialog标签中定义的事件名 @done ***父组件中dialog标签中的@done='xxxfunction' --xxxfuncton为methods中执行的方法   1.子组件 -传递 1.点击事件 &lt;el-table-column fixed="ri...
Vue $emit()不能触发父组件方法的原因及解决
10-15
主要介绍了Vue $emit()不能触发父组件方法的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
01-21
组件之间事件触发 之前使用组件，并不是很频繁，是水平...父子组件之间事件触发可以使用$emit $emit的使用方法如下： 在子组件中，写一个click点击事件。比如： cancelCU() { this.dialogVisible = false; this.$emi
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输。重点给大家介绍vue中的$emit 与$on父子组件与兄弟组件的之间通信方式，感兴趣的朋友一起看看
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
主要介绍了vue中$refs, $emit, $on, $once, $off的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
node-v11.8.0-linux-arm64.tar.xz
05-04
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
C语言期末大作业之图书信息管理系统实现-基于Dev-C++实现.zip
05-04
c语言期末大作业 C语言期末大作业之图书信息管理系统实现_基于Dev-C++实现
node-v8.16.2-sunos-x64.tar.xz
05-04
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
爬虫selenium需求geckodriver
最新发布
05-04
爬虫selenium最新版本缺少的,快速拿去使用。
vue $emit怎么传参
05-04
使用 `$emit` 方法，可以向父组件传递数据。在 `$emit` 方法中，第一个参数是事件名称，第二个参数是要传递的数据。 比如，在子组件中使用 `$emit` 方法向父组件传递一个名为 `update` 的事件和一个对象类型的数据： ``` this.$emit('update', { name: 'Tom', age: 18 }) ``` 在父组件中，可以使用 `v-on` 或 `@` 指令监听子组件触发的事件，并在事件处理函数中接收子组件传递过来的数据： ``` <template> <div> <child-component @update="handleUpdate"></child-component> </div> </template> <script> export default { methods: { handleUpdate(data) { console.log(data) // { name: 'Tom', age: 18 } } } } </script> ``` 需要注意的是，事件名称必须在父组件中被监听，否则子组件的 `$emit` 方法将不会生效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值