VUE-组件间通信(二)$emit

这篇具有很好参考价值的文章主要介绍了VUE-组件间通信(二)$emit。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

$emit

1、单向绑定

子组件向父组件传值

2、使用示例

父组件

<template>
  <div id="app">
    <!-- 监听自定义触发事件 @emitInvokeEvents-->
      <SonDemo @emitInvokeEvents="fatherFunction"></SonDemo>
  </div>
</template>

<script>
import SonDemo from './components/SonDemo.vue'

export default {
  name: 'App',
  components: {
    SonDemo
  },
  methods:{
    fatherFunction(value){
      console.log("父组件的方法被唤醒"+value)
    }
  }
}
</script>

子组件

<template>
<div>
    <button @click="sonFunction">子组件向父组件传值</button>
</div>
</template>
<script>
export default {
    methods:{
        sonFunction(){   
            //emitInvokeEvents 自定义触发事件
            //@emitInvokeEvents  监听自定义触发事件
            //第一个参数:自定义事件
            //第二个参数:传递的值
           this.$emit('emitInvokeEvents','子组件向父组件传递的值');
        }
    }
}
</script>

效果

VUE-组件间通信(二)$emit,VUE,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-841817.html

到了这里,关于VUE-组件间通信(二)$emit的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解

    目录 前言 父组件传子组件 ---- props 给要传递数据的子组件绑定要传过去的属性及属性值 在子组件中使用props配置项接收 props配置项 子组件传父组件 ---- 组件的自定义事件 子组件向父组件传递数据 通过代码来绑定自定义事件 本文将介绍在Vue中父子组件如何进行通信 这里先介

    2024年02月05日
    浏览(117)
  • Vue子组件向父组件传值(this.$emit()方法)

    首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 声明 使用 第二步 子组件向父组件传值 1.  在子组件中需要向父组件传值处使用this.$emit(\\\"function\\\",param);    //其中function为父组件定义函数,param为需要传递参数 2.  在父组件中子

    2024年02月10日
    浏览(32)
  • vue 子组件 emit传递事件和事件数据给父组件

    1 子组件通过emit 函数 传递事件名\\\'init-complete 和 数据dateRange 2  父组件 创建方法 接收数据 3 父组件 创建的方法 和 子组件事件绑定 4 完整代码 4.1 子组件 4.2 父组件 ps: 不能传递list 类型

    2024年02月11日
    浏览(45)
  • 【vue3 之 emits & $emit() 讲解 】监听子组件事件、emit事件验证、options写法、composition setup写法

    前言:不懂在父组件里对子组件 @xxxx 声明自定义事件,就不用看本篇文章了。本篇对此内容不做任何说明。这是与 emits 结合使用的必备知识! 场景说明: 组件功能封装:         组件封装了一系列 emit 事件,并返回数据、回调函数等,或单纯执行某个操作后,触发父组

    2023年04月09日
    浏览(55)
  • 探索前端跨组件通信:EventBus在Vue和React中的应用

    本文作者系360奇舞团前端开发工程师 事件总线(Event Bus) 是一种用于组件间通信的模式,通常用于解决组件之间的解耦和简化通信的问题。在前端框架中,如 Vue.js,事件总线是一个常见的概念。基本上,事件总线是一个能够触发和监听事件的机制,使得组件能够在不直接依

    2024年02月02日
    浏览(70)
  • Vue3 setup tsx 子组件向父组件传值 emit

    需求: Vue3 setup 父组件向子组件传值,子组件接收父组件传入的值;子组件向父组件传值,父组件接收的子组件传递的值。 父组件: parent.tsx : 子组件: TotalPreview.tsx : 页面效果:

    2024年02月13日
    浏览(40)
  • Vue.js 中的 $emit 和 $on 方法有什么区别?

    在 Vue.js 中,$emit 和 $on 方法是两个常用的方法,用于实现组件间的通信。它们可以让我们在一个组件中触发一个自定义事件,并在另一个组件中监听这个事件,从而实现组件间的数据传递和交互。虽然它们的名字很相似,但它们的作用和用法有所不同。本文将介绍 $emit 和

    2024年02月08日
    浏览(38)
  • Vue.js组件精讲 第4章 组件的通信2:派发与广播——自行实现dispatch和broadcast方法

    上一讲的 provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系。然后有两种场景它不能很好的解决: 父组件向子组件(支持跨级)传递数据; 子组件向父组件(支持跨

    2024年04月13日
    浏览(53)
  • Vue组件的嵌套关系;父组件传递子组件props;子组件传递给父组件$emit;自定义事件;案例

    前面将所有的逻辑放到一个App.vue中: 在之前的案例中,只是创建了一个组件App; 如果一个应用程序将所有的逻辑都放在一个组件中,那么这个组件就会变成非常的臃 肿和难以维护; 所以组件化的核心思想应该是对组件进行拆分,拆分成一个个小的组件; 再将这些组件组合

    2024年02月13日
    浏览(46)
  • vue子传父的一种新方法:this.$emit(‘input‘, value)可实现实时向父组件传值

    今天要说的就是利用v-model和this.$emit(‘input’,value)实现子传父。 众所周知,v-model是给input绑定,方便对表单的双向绑定。 其实,v-model是个语法糖,具体案例如下所示。 我们今天所说的是自定义组件实时子传父,请继续看下面代码:

    2024年02月13日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包