子组件传值给父组件中的$emit

最新推荐文章于 2024-08-17 22:22:21 发布

elephant230

最新推荐文章于 2024-08-17 22:22:21 发布

阅读量461

点赞数

分类专栏： vue 文章标签：组件传值

本文链接：https://blog.youkuaiyun.com/elephant230/article/details/95740310

版权

vue 专栏收录该内容

8 篇文章

订阅专栏

组件传值常见于页面头部和导航栏等公共部分，本文针对项目做笔记，介绍子组件给父组件传值。展示父组件引入子组件，强调绑定事件名称与methods对应，说明子组件通过this.$emit发射事件到父组件，还提及在父组件监听自定义事件并添加处理方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件传值的现象很普遍，大多出现在页面头部或是导航栏中，而这两部分通常都是各个页面的公共部分，所以涉及到组件间的相互传值在所难免，索兴针对近期写的项目做个小笔记，先来说说子组件给父组件传值的现象。

先展示父组件中引入的子组件：

红色箭头的指示位置，即为引入的子组件，注意子组件绑定的事件名称和下方methods中的事件对应

子组件内部的事件：

this.$emit大显神通

红色箭头指示的正是子组件中的事件，如果想让这一事件在父组件中发生，需要通过this. $emit来发射过去，方可实现

即 $emit的两个参数，第一个理解为只是传递响应的事件的一个代号

在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数（参数随意）

然后在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

（以上官方说法，读起来哏得慌）

感谢文章作者：https://baijiahao.baidu.com/s?id=1623258793504616613&wfr=spider&for=pc

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

elephant230

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue父子组件传值----$emit子传父

qq_45222558的博客

04-24

4517

Vue父子组件传值是个比较经典的问题，在这里，咱们先谈一下，子组件给父组件传值。这是一个子组件  <template> <div> <input type="text" v-model="message" /> <button @click="getScore">得分</button> </div> </template> <sc

Vue子组件传值给父组件this.$emit();

L_WalkingPig的博客

03-16

2350

上一篇博客记录了Vue父子组件传值使用props，这篇来说说子组件传值给父组件的 ——this.$emit('xxx属性',xxx参数)； 子组件： //子组件自定义一个按钮触发onSubmit()方法; <el-form-item> <el-button type="primary" @click="onSubmit">立即创建</el-butt...

参与评论您还未登录，请先登录后发表或查看评论

子组件向父组件传值-$emit

冰点契约的博客

01-27

288

this.$emit() 作用：子组件向父组件传值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head&g

子向父传参1——$emit用法

qq_30541261的博客

12-12

288

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv...

vue 使用$emit向父组件传值

m0_52364694的博客

07-24

380

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn 子组件 父组件传给子组件的toCity:{{sendData}} ...

vue $emit 子组件向父组件传值

maoxiaohei_的博客

02-04

205

子组件通过$emit传递数值  <template> <view class="leave_cont"> <view class="flex1"> <view>日期: </view> <picker mode="date" :value="start_date" :start="start_date" :end="other" @change="bindDateCh

node emit传两个参数，处理两个参数的方法

duancsdn的博客

12-02

998

EmailEvent.emit(‘getEmai0’,Email0); EmailEvent.emit(‘getEmail’,Email1); EmailEvent.all(‘getEmai0’,‘getEmail’,function(Email0,Email1){ Me.ExcelNoSet(Email0,Email1); });

vue 父组件给子组件传值子组件给父组件传值的实例代码

10-17

本篇将详细讲解Vue中的父子组件传值机制，包括父组件如何向子组件传递数据以及子组件如何向父组件反馈信息。 1. **父组件给子组件传值** 在Vue中，父组件向子组件传递数据主要是通过`props`属性实现的。首先，在...

019、子组件向父组件传递参数 this.$emit

最新发布

༺ bestcxx的专栏 ༻

08-17

1068

这里父组件通过 @fn=“clickMenu” 获得子组件的上传的参数，然后交给 clickMenu(i) 函数处理。this.$emit 是 Vue.js 中一个非常重要的方法，它允许子组件向父组件发送自定义事件，并传递数据。这里，调用子组件 hdClick 方法时，将 index 函数传递给父组件，自定义变量为 fn。data: 你要传递给父组件的数据，可以是任何类型，例如字符串、数字、对象、数组等。eventName: 你要发送的自定义事件的名称。父组件需要使用一个函数接受子组件传递来的参数。

vue父组件给子组件传值

12-21

下面我们将详细探讨如何在Vue中实现父组件给子组件传值。 1. **Props定义**：在Vue中，子组件通过props属性接收父组件传递的数据。在子组件的选项对象中，我们需要定义一个props数组，列出所有期望接收的属性名。...

Vue父子组件传值---子传父($emit)

sxs7970的博客

03-12

4618

官网的一句话：父子组件的关系可以总结为 props 向下传递，事件方法向上传递。父组件通过 props 给子组件下发数据，子组件通过事件给父组件发送消息。 子组件渲染父组件的数据，在上一篇文章中做了一些解释，这里要说明的是，子组件使用 $emit触发父组件的自定义事件。 父组件向子组件传递方法，使用的是事件绑定机制；v-on: 当我们自定义一个事件属性之后，那么，子组件就能够通过某...

Vue的$emit传值

xiaoxiaoluckylucky的博客

03-08

1万+

$emit，父组件传data给子组件，子组件通过$emit来触发父组件中绑定在子组件身上的事件，达到改变父组件中的data的方法。下面介绍$emit传值的几种方法：一：$emit传递单值 子组件Test.vue： <template> <div> <div>子组件</div> <button @click="changeFather">点击我向父组件传递参数</button> </div> </tem

篇二、组件通信（子组件传值给父级 $emit ~ 自定义事件）

非为000的博客

07-19

2906

$emit 用法（$emit写在子组件中）当子组件需要向父组件传值时，就会用到自定义事件。子组件用$emit()来触发事件，父组件用$on()来监听子组件事件。 子组件 父组件 ...

Vue中$emit传递一个或多个参数

qq_36519327的博客

10-18

1755

Vue中$emit传递一个或多个参数

$emit传递多个参数

热门推荐

lxy123456780的博客

02-20

3万+

$emit传递一个参数时 子组件： this.$emit('closeChange',false); 父组件： <posilCom @closeChange="closeCom($event)"></posilCom> closeCom(msg) { this.msg = msg; } $emit传递多个参数时 子组件： this.$emit('closeChange'...

vue中$emit传递多个参数

saltlike的博客

10-13

2万+

$emit传递一个参数的情况 //child组件，在子组件中触发事件 this.$emit('handleFather', param) //father组件，在父组件中引用子组件 <child @handleFather="handleFather"></child> //或者 //<child @handleFather="handleFather($event)"></child> <script> export default

vue中关于$emit的用法

qq_43170213的博客

10-08

1万+

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn；例如：子组件： <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/&g

vue中父子组件传值出现undefined

shangsiqi1的博客

11-15

8755

当父子组件需要用到对方的值的时候是不能访问对方data中的数据或methods的那么当父向子传值的时候就在父组件中引入的子组件的标签上绑定属性再把值传递过去在子组件中要先把属性放入props数组中,才能使用而子向父传值就要父组件提供方法给子组件, (在父组件中找到子组件引入的标签,标签上@xxx=“父组件方法名”) 在子组件中调用父组件的方法并把值传给他 (子组件中直接调用this.$em...

$emit传递多个参数的方法

12-09

8178

$emit传递多个参数时子组件：this.$emit('closeChange',false,true)。 父组件： <posilCom @closeChange="closeCom(arguments)"> //自动组成：数组形式 closeCom(msg)｛ this.msg1 = msg[0]; this.msg2 = msg[1]｝

Vue3子组件传值给父组件

09-17

在Vue 3中，可以使用props来实现子组件向父组件传值的功能。以下是具体的步骤： 1. 在父组件中定义一个props属性来接收子组件传递的值。例如，在父组件的模板中添加props属性： ```html ...