Vue 组件通信$emit

最新推荐文章于 2024-05-16 21:01:58 发布
最新推荐文章于 2024-05-16 21:01:58 发布
阅读量188 收藏
点赞数
分类专栏： Vue 文章标签： Vue 组件通信 emit
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caoxinjian423/article/details/108896417
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>组件通信$emit</title>
</head>
<body>
    <div id="test">

    </div>
    
    <script>
        Vue.component("ComponentA", {
            template:`
            <div>
                我是组件A，count值为：{{count}}
                <button @click="handleClick">你点击我增加</button>
            </div>
            `,
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                handleClick() {
                    this.count++
                    this.$emit("cnAdd", this.count)
                }
            },
        })
        const app = new Vue({
            el:"#test",
            data:{

            },
            template:`
            <div>
                <ComponentA @cnAdd=handleCount></ComponentA>
            </div>
            `,
            methods: {
                handleCount(cn) {
                    console.log(cn);
                }
            },
        })
    </script>
</body>
</html>

效果截图：

书院二层楼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VueDay06(组件反向传值，多层传值 )
Lonely_Game的博客
10-18 563
什么是单向数据流 指的是父组件通过属性传值给子组件如果子组件修改了传过来的值，父组件的对应的属 性是不会改变的，也就是说，渲染到页面的父组件数据是不会变的，所以，有父组件传 给子组件的值不能反向修改(响应),但是父组件数据改变是可以改变子组件的值的,数 据是单向的. 事件修饰符 @事件名.stop 阻止冒泡; @事件名.prevent 阻止默认事件; @事件名.capture 监听事件捕获; @事件名.self 阻止事件捕获、冒泡时触发函数，只能在目标阶段触发该函数如目标阶段节点不是该事件绑定的
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
Vue 中的 $emit 与 $on 父子组件与兄弟组件之间的通信方式 在 Vue 中，$emit 与 $on 是两个非常重要的函数，它们用于实现组件之间的数据传输。下面，我们将详细介绍 Vue 中的 $emit 与 $on 父子组件与兄弟组件之间...
vue中 关于$emit的用法
Oliver的博客
04-11 1631
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn；    例如：子组件：   &lt;template&gt; &lt;div class="train-city"&gt...
详细分析Vue3中的emit用法（子传父）
最新发布
码农研究僧的博客
05-16 9361
在 Vue 3 中，emit 是一种机制，用于在子组件中触发事件，并在父组件中监听这些事件 提供一种组件间通信的方式，尤其是在处理父子组件数据传递和交互时非常有用
Vue组件通信方式 props/$emit
NolanKy 的 技术博客
11-07 740
自定义事件本质是由子组件向父组件传递信息 <template> <div role="alert" :class="['el-alert',changeAlert,'is-center','is-light']"> <i :class="['el-alert__icon',changeIcon]"></i> <div class="el-alert__content"> <slo
Vue中组件通信：子传父emit
qq_38782335的博客
04-04 192
vue3中无法直接使用$emits，需要使用const emit = defineEmits(['(对应方法名)'])的方式来向父组件传递信息，一般在onMounted(() => {})中去执行传递方法的事件，如：emit("getMsg", "我来自子组件")，然后父组件在子组件上使用@getMsg="showMsg"的方式来获取传入的信息，注意：getMsg是对应的子组件的方法名，此方法名称自定义，showMsg为父组件的方法名称也可以自定义。
Vue $emit()不能触发父组件方法的原因及解决
10-15
在Vue.js中，组件间的通信是通过事件和监听器来实现的，其中 `$emit` 是子组件用来触发自定义事件的关键方法。当遇到 `$emit` 无法触发父组件方法的情况，开发者可能会感到困惑。本文将深入探讨这个问题的原因以及...
解决vue bus.$emit触发第一次$on监听不到问题
10-15
在Vue.js开发中，父子组件通信是一个常见需求。Vue提供了多种方法实现组件间通信，其中Vue实例的事件总线（Event Bus）是一个轻量级事件通信机制，对于非父子关系的组件间通信尤为适用。然而，在实际开发过程中，...
Vue组件通信$attrs、$listeners实现原理解析
10-14
在开发过程中，组件间的通信是必不可少的，Vue 提供了多种通信机制，如 props、事件 emit、Vuex、Event Bus 以及 provide/inject 等。在这些机制中，`$attrs` 和 `$listeners` 是一种相对隐式且灵活的通信方式，它们...
vue $emit
weixin_42415974的博客
07-06 490
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="counter
vue之组件通信
星星之火 可以燎原
01-30 306
父和子之间的通信 props:(子组件使用父组件的数据) 子和子之间的通信 - 使用 `$on(eventName，function(){})` 监听事件 - 使用 `$emit(eventName,data)` 触发事件 github：https://github.com/webxing 简书：https://www.jian...
vue 的$emit
jean_0920的博客
09-15 1031
在vue中我们常常会用到组件嵌套，对于新手来说，父子组件通信会经常困扰我们，不懂还在网站找例子？看完这篇你就会用了。 //父级 new Vue({ el:"#app", data:{ aaa:111, bbb:222 }, methods:{ dosometing:function(msg){ ...
vue之父子组件间通信实例（props、$ref和 $emit）
Turn_to_empty的博客
08-25 206
转载 组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信，也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点，来讲解如何实现父子组件间通信。 在说如何实现通信之前，我们先来建两个组件father.vue和child.vue作为示例的基础。 //父组件 <template> <div> <h1>我是父组件！</h1.
Vue的$emit传值
热门推荐
xiaoxiaoluckylucky的博客
03-08 1万+
$emit，父组件传data给子组件，子组件通过$emit来触发父组件中绑定在子组件身上的事件，达到改变父组件中的data的方法。下面介绍$emit传值的几种方法： 一：$emit传递单值 子组件Test.vue： <template> <div> <div>子组件</div> <button @click="changeFather">点击我向父组件传递参数</button> </div> </tem
Vue中$emit的用法
AlopexG的博客
05-12 4520
一句话理解： 子组件可以使用$emit触发父组件的自定义监听 例如 子组件 item.vue <template> <button @click="$emit('test', 5)"> 触发父组件的test监听, 参数为5 </button> </template> <script> // ... </script>　 父组件 xxx.vue <template&g
Vue里面的$emit与$on
ting119的博客
07-06 1759
    学习Vue看到了里面的$emit，有一个疑问冒出来：“$emit必须和$on一起使用吗？”    在我看来虽然没有说是必须一起使用，但基本上都是搭配在一起出现，因为$emit的作用是子组件对父组件发送数据，$on可以接收到子组件返回的数据，所以有$emit的地方应该就有$on了，我是这样理解的。    $emit的参数Event.$emit('name',data);　其中name是发送数...
vue中$emit的用法
qq_41555278的博客
05-01 341
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 示例： A子组件 B父组件 B引用了A组件，在A组件中使用.$emit 触发B父组件的addRow事件 this.$emit('addRow', this.oldInputForm, JSON.parse(JSON.stringify(this.inputForm))) B组件中的代码 <A ref="aForm" @addRow="Row(a)"><...
setup组件通信$emit
03-28
在Vue.js中，组件之间的通信可以通过props和$emit来实现。props是父组件向子组件传递数据的方式，而$emit则是子组件向父组件发送事件的方式。 当一个子组件需要向父组件传递数据时，可以使用$emit方法。首先，在子组件中定义一个事件，并使用$emit方法触发该事件。父组件可以通过在子组件上监听该事件来接收数据。 下面是一个示例： 子组件Child.vue： ``` <template> <button @click="sendMessage">发送消息</button> </template> <script> export default { methods: { sendMessage() { this.$emit('message', 'Hello, parent!'); // 触发名为'message'的事件，并传递数据 } } } </script> ``` 父组件Parent.vue： ``` <template> <div> <child @message="handleMessage"></child> <!-- 监听名为'message'的事件，并指定回调函数 --> <p>{{ receivedMessage }}</p> <!-- 显示接收到的消息 --> </div> </template> <script> export default { data() { return { receivedMessage: '' } }, methods: { handleMessage(message) { this.receivedMessage = message; // 接收到子组件传递的消息 } } } </script> ``` 在上述示例中，当点击子组件中的按钮时，会触发名为'message'的事件，并将字符串'Hello, parent!'作为参数传递给父组件。父组件通过监听'message'事件，并在回调函数中接收到子组件传递的消息，并将其显示在页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值