vue 使用$emit 相父组件传递参数的回调函数

最新推荐文章于 2024-01-24 09:56:16 发布
原创 最新推荐文章于 2024-01-24 09:56:16 发布 · 1w 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细解析了Vue.js中子组件如何通过this.$emit向父组件传递数据，以及父组件如何接收并处理这些数据，展示了具体代码实现。

 

*** 子组件中的 this.$emit('done ', someDdata)

--done为父组件跳转子组件dialog标签中定义的事件名 @done

***父组件中dialog标签中的@done='xxxfunction'

--xxxfuncton为methods中执行的方法

 

1.子组件 -传递

1.点击事件
<el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button-group>
              <el-tooltip class="item" effect="dark" content="确认选择" placement="top">
                <el-button type="success" size="mini" @click="confirmChoiceVest(scope.row)"> //确认按钮 执行
                  确认选择
                  <i class="fa fa-check-circle"></i>
                </el-button>
              </el-tooltip>
            </el-button-group>
          </template>
        </el-table-column>

2. 方法
 methods: {
    confirmChoiceVest(row) {
      this.$emit('done', row);
      this.show = false;
    },

2.父组件 -接受

1.之前跳到子组件的dialog                 
<show-all-vest-dialog ref="allVestDialog" @done="callbackConfirmVest"></show-all-vest-dialog>

2.父组件中的回调
methods: {
    callbackConfirmVest(row) {
      this.model.vestName = row.nickname;
      this.model.vestId = row.vestId;
    },

[vue]子组件通过$emit调用父组件的方法以及传递数据给父组件
02-01 4289
2019-05-10 [vue]子组件通过$emit调用父组件的方法以及传递数据给父组件 原理也很简单，子组件使用$emit来触发父组件的函数，子组件借助这个父组件的函数将数据传给父组件。 父组件中方法： <template> <div>{{ChildData}}</div> <router-view @pushData="getChildData"></router-view> </template> .
组件间的信息传递（$emit、$on、$off）
qq_33911541的博客
03-03 1042
组件间的信息传递（$emit、$on、$off）
vue子组件回调父类方法this.$emit()
u011086811的博客
03-16 2446
子组件有时需要想向父组件传值或者使用父组件方法 那我们就要用到this.$emit() //父组件-------------------------------------------------- <template> .... <子组件 :deta='deta' @回调方法="父类方法" ></子组件> </template> <script> methods: { 父类方法(回..
Vue2 $emit传函数类型回调获取父组件参数
白瑕 的博客
11-08 2826
$emit传函数类型回调获取父组件参数.
vue组件通信
weixin_58431406的博客
06-06 1205
父组件向子组件通信，方法一：通过 props 属性，方法二：通过引用（ref） 子组件向父组件通信，方法一：通过事件传递数据，$emit()方法，方法二：使用回调函数，props，方法三：使用 Vuex 状态管理
vue之$emit返回值
Hi,印象钟情
09-13 3934
使用场景：子组件调用父组件的方法并获取到父组件方法的返回值。如果是兄弟组件的话采用事件车。
vue 子组件调用($emit)父组件方法后父组件方法如何回调子组件方法
Q1761991696的专栏
09-03 9608
一、子组件调用父组件方法: 1.子组件方法: …… methods:{ ShowMore(step){ this.$emit("ChildClick",step);//第一个参数为父组件中调用子组件时@ShowMore方法名,必须保持一致；第二个为参数; } } …… 2.父组件方法: …… methods：{ ShowMore(step){ let result...
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
例如，当你不再需要监听某个事件时，可以通过 `$off('event', callback)` 来移除对应的监听器，防止事件触发时回调函数仍然被执行。 总结来说，Vue 的 `$refs`、`$emit`、`$on`、`$once` 和 `$off` 提供了强大的...
详解vue中this.$emit()的返回值是什么
10-17
在Vue组件中，当你需要将数据或事件从子组件传递给父组件时，可以使用`this.$emit()`。例如，在提供的代码示例中，子组件`EventDemo`有一个`handleChange`方法，该方法在`input`元素的`change`事件触发时被调用。在...
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
10-20
通过这种方式，父组件可以通过v-on指令监听到btn-click事件，并通过回调函数来处理分页逻辑，如从数据源获取对应页码的数据等。 组件定义完成后，就可以在其他Vue实例中通过全局变量访问和使用这个组件了。在父组件...
Vue3 emits 结合回调函数的使用
PinkCoder
01-24 2238
vue中如何使用回调函数，emits如何结合回调函数让父子组件通信
vue3 setup emit 不生效 子组件中的值回传给父组件
weixin_44166439的博客
04-20 4270
父组件 <Input v-model="val"/> 子组件 <input v-model="input" /> props: { modelValue: { tppe: [ String | Number], default: '', }, }, setup() { const input = ref('') const clearVal = () => { input.value = '' emit('
Vue中this.$emit函数传递一个或者多个参数的写法
热门推荐
asd1170586462的博客
06-01 2万+
一个参数: 子组件： this.$emit('closeChange',false); 父组件： <posilCom @closeChange="closeCom($event)"></posilCom> closeCom(msg) { this.msg = msg; } 多个参数: 子组件： this.$emit('closeChange',false,true); 父组件： <posilCom @closeChange="closeCom(arguments)
【Vue】this.$emit 的 实现思路
sparks42的博客
09-20 717
this.$emit 描述：触发当前实例上的事件，附加参数都会传给监听器回调。 Vue.prototype.$emit = function (event) { const vm = this let cbs = vm._events[event] // 找到事件名对应的回调集合 if (cbs) { const args = toArray(arguments, 1) // 将附加参数转为数组 for (let i = 0; i < cbs.length
vue 中this.$emit()的返回值是什么？
weixin_34383618的博客
04-06 4940
#vue中this.$emit();返回值是什么 vue中的三大属性:属性 、事件、插槽，---事件 在事件中有 普通事件：@click/@input/@change/@xxx...事件； 修饰符事件：@input.trim,@click.stop,@submit.prevent...一般用于原生html元素； 答：在vue中this.$emit(); 返回值是this; 代码示例： ...
Vue中$emit调用父组件异步方法，子组件通过回调实现同步。
var_Xu的博客
11-05 4757
// 父页面 // 父页面调用组件的html中添加事件 @test=“test” methods : { test(data, cab) { setTimeout(() => { // 这里使用定时器内 模拟执行完容方法 console.log(data) // 这是传递过来的参数 用于处理 data++ cab(data) // 将处理完成的数据返回回去
this.$emit() 实现子组件传父组件
H_lucky_的博客
09-18 449
使用 this.$emit(参数1：自定义的事件名，参数2：传递的数据)
vue组件踩坑笔记之$emit事件传参
jaquechen的博客
07-23 4093
<!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-...
$emit vue3子组件与父组件通信有什么好处？
最新发布
06-23
### Vue3 中 $emit 子组件与父组件通信的优势及使用场景 在 Vue3 中，子组件通过 `$emit` 方法向父组件传递信息是一种常见且高效的通信方式。以下是这种通信方式的主要优势及适用场景： #### 优势 1. **符合事件驱动机制** Vue 的 `$emit` 方法基于 DOM 事件的工作机制设计，开发者可以通过监听和触发自定义事件来实现父子组件间的通信。这种方式直观且易于理解，符合现代前端开发中的事件驱动编程思想[^1]。 2. **数据单向流动** Vue 强调数据的单向流动（从父到子），而 `$emit` 提供了一种明确的反向通信路径（从子到父）。这种双向通信模式能够确保数据流清晰可控，减少潜在的错误风险[^1]。 3. **灵活性高** 子组件可以通过 `$emit` 发送任意类型的数据（如字符串、对象、数组等），并且可以为每个事件指定唯一的名称，便于父组件根据具体需求进行处理[^1]。 4. **解耦性强** 子组件仅负责触发事件并传递数据，而具体的逻辑处理由父组件完成。这种职责分离的设计模式有助于提高代码的可维护性和复用性[^1]。 5. **支持动态交互** `$emit` 方法允许子组件在用户交互或状态变化时实时通知父组件，从而实现动态更新和响应式交互[^1]。 #### 使用场景 1. **表单提交** 子组件中包含表单元素时，可以通过 `$emit` 将用户输入的数据传递给父组件进行验证或提交[^1]。 2. **按钮点击事件** 子组件中的按钮点击事件可以通过 `$emit` 触发父组件的回调函数，例如关闭对话框或切换页面状态[^1]。 3. **状态更新通知** 当子组件的状态发生变化时（如加载完成、错误发生等），可以通过 `$emit` 向父组件发送通知，以便父组件采取相应措施。 4. **复杂交互流程** 在多步骤表单或向导界面中，子组件可以利用 `$emit` 通知父组件当前步骤的状态变化，从而控制整体流程。 ```vue <!-- 子组件示例 --> <template> <button @click="handleClick">点击我</button> </template> <script> export default { methods: { handleClick() { this.$emit('custom-event', { message: '来自子组件的数据' }); } } }; </script> ``` ```vue <!-- 父组件示例 --> <template> <ChildComponent @custom-event="handleCustomEvent" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleCustomEvent(data) { console.log(data); // 输出：{ message: '来自子组件的数据' } } } }; </script> ``` ### 注意事项 尽管 `$emit` 是一种强大的工具，但在某些情况下可能需要结合其他通信方式。例如，当组件层级较深或存在兄弟组件通信需求时，事件总线或 Vuex 可能是更好的选择[^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值