Vue组件:使用$emit()方法监听子组件事件

1、监听自定义事件

父组件通过使用 Prop 为子组件传递数据,但如果子组件要把数据传递回去,就需要使用自定义事件来实现。父组件可以通过 v-on 指令(简写形式"@")监听子组件实例的自定义事件,而子组件可以通过调用内建的 $emit() 方法并传入事件名称来触发自定义事件。

组件之间的数据传递:

父传子:使用 Props 属性。

子传父:使用 $emit() 方法。

$emit() 方法的语法格式如下:

javascript 复制代码
this.$emit( eventName, [...args] )

参数说明:

eventName:传入事件的名称。

...args\]:触发事件传递的参数,该参数是非必选。 **【实例】**使用$emit()方法,实现子组件向父组件传递事件。 **(1)创建 ParentComponent.vue 父组件** ```html ``` **(2)创建 ChildComponent.vue 子组件** ```html ``` **(3)在 App.vue 根组件中,引入父组件** ```html ``` **执行结果:** ![](https://i-blog.csdnimg.cn/direct/cc511f9acf3b4337b9b1571398446bd3.png) ## 2、组件事件配合 v-model 指令 如果是在子组件中用户输入数据,我们希望在获取数据的同时发生数据给父组件,这是可以配合 v-model 指令使用。 **【实例】**子组件中用户输入数据,在父组件中实时获取数据。 **(1)修改 ParentComponent.vue 父组件** ```html ``` **(2)修改 ChildComponent.vue 子组件** ```html ``` **执行结果:** ![](https://i-blog.csdnimg.cn/direct/c45e3fa00e13476db3a7192be19a909b.png)

相关推荐
要加油哦~23 分钟前
JS | 知识点总结 - 原型链
开发语言·javascript·原型模式
哆啦A梦15881 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫1 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo1 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li2 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐2 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
qq_398586542 小时前
Threejs入门学习笔记
javascript·笔记·学习
浪裡遊3 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
課代表3 小时前
JavaScript 二维数组的三种定义与初始化方法
javascript·初始化·二维数组·多维数组·动态数组·循环遍历·数组合并
鸡吃丸子4 小时前
Next.js 入门指南
开发语言·javascript·next.js