props父子通信常见用法及$emit使用方法@click.native使用方法

最新推荐文章于 2024-07-12 20:22:37 发布
最新推荐文章于 2024-07-12 20:22:37 发布
阅读量575 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/acf961123/article/details/93623889
版权
本文详细介绍了Vue.js中父子组件间的通信方式，包括父组件向子组件传值、子组件向父组件通过$emit发送事件及@click.native的使用场景。通过具体示例，帮助读者理解并掌握Vue组件通信的基本原理。

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

Demo1：父组件向子组件传值

child.vue

Father.vue

浏览器显示      李明

Demo2:子组件向父组件传值---------$emit 用法

son.vue

Father.vue

运行后点击  +1   数字加一控制台输出数字加一；

Demo3：@click.native用法

运行后点击+1 控制台输出调用父组件本地方法；

不明白的小朋友可以试试去掉native后的点击效果；

 

 

使用vue和element布局时，关于左右布局传参数的2种写法vue组件添加事件@click.native
qq_39168286的博客
08-23 1306
先上图说说 为何第一种方式跳转不了 要实现的是点击左边框，右边也会出现相应的值 <el-submenu index="3"> <template slot="title"> <i class="el-icon-location"></i> <span slot="title">系统管理</span&...
vue中子传父之间通信(this.$emit触发父组件方法和.sync修饰符与$emit(update:xxx))
最新发布
m0_46165586的博客
08-07 735
看了几篇帖子，都没有将$emit两种用法汇聚总结在一起。需要额外的浪费时间去查看其他帖子，索性自己总结一下，方便以后查看。
click.native的用法
weixin_43258184的博客
11-17 891
当你给一个vue组件绑定事件的时候，要加上native，否则不起作用，如果是普通的html元素，就不需要。
Vue中$emit的用法
AlopexG的博客
05-12 4595
一句话理解： 子组件可以使用$emit触发父组件的自定义监听 例如 子组件 item.vue <template> <button @click="$emit('test', 5)"> 触发父组件的test监听, 参数为5 </button> </template> <script> // ... </script>　 父组件 xxx.vue <template&g
$emit的使用
李振恒
01-04 530
$emit 子组件可以通过emit触发父组件的自定义事件； <div id="app"> <heng @click="click1"></heng> </div> Index.js Vue.component('heng',{ template:` <div> <button @click="$emit(\...
click传值vue_vueclicknativeon(vue click事件传参数)
weixin_34337678的博客
01-14 997
好长的名字。效果是点击元素并改变其颜色，通过改变类名来移动动画效果。这里使用了v-bind和@符号废话！='app'='isOk '？@='ooo2()'这是一个神奇的网站是v-，的缩写，将事件绑定到类，然后用三元表达式判断事件IdOk是一个标志位，类似于第二篇博文写的标志，是一个判断。那么问题来了，怎么判断呢？当时我本来想写函数oo2()//isOk？this . style . clas...
Vue2之组件通信
在所有的事情背后，要有一颗坚定的的本心，要有一颗应对变革和提升自我的本心，世界瞬息万变，本心要坚持到底，保持学习，时刻复盘
07-12 1303
Vue2之组件通信
Vue3（五）：组件通信详解（九种方法）
m0_73560798的博客
04-16 2539
自定义事件常用于：子 => 父- 事件名是特定的（click、dbdlick、change等等）- 事件对象`$event`: 是包含事件相关信息的对象（`pageX`、`pageY`、`target`、`keyCode`）- 事件名是任意名称- 事件对象`$event`: 是调用`emit`时所提供的数据，可以是任意类型！！！vue2中 @click是自定义事件，可以通过.native修饰符变为原生DOM事件。
Vue 组件通信
weixin_42695446的博客
12-04 306
Vue 自定义事件
vue.js入门（3）——详解组件通信
10-21
1. 使用props进行父子组件通信 这是最常见的组件间通信方式。父组件通过props向子组件传递数据，子组件通过props接收数据。这种方式的好处是简单明了，且子组件依赖于父组件的数据，但反过来父组件不直接依赖子组件...
Vue-6【prop与非prop、.native、非父子组件传值】
Yesterday_Tomorrow的博客
12-06 285
一.prop与非prop (1).静态传值，动态传值 静态传值“”中为字符串，动态传值:count=""中为js表达式 静态传值是没有引用的，就只是子组件自己给自己传值 动态传值则是指向根目录的，应用于父组件给子组件传值 <div id="root"> <btn :count="num"></btn> <btn count="5"></btn> </div> <sc.
Vue~@click($event)
weixin_44234050的博客
09-06 2888
fn(e):{ let clickDom = e.currentTarget; // currentTarget 获取绑定点击事件的节点 let currentDom = e.target; // target 获取当前点击节点 let parent = clickDom.parentElement; // parentElement获取绑定事件节点的父节点 let previous ...
Vue 关于$emit与props的使用
闲适_
02-22 1803
一、props 和 $emit 1、子组件向父组件传值，通过 $emit 事件向父组件发送消息，将自己的数据传递给父组件。 2、props 可以在组件上注册一些自定义属性。父组件通过绑定该属性来向子组件传入数据，子组件通过 props 属性获取对应数据。 二、示例 1.父组件 // parent.vue <template> <div> <p>childMessage:
$emit( ) 触发组件（自定义元素）当前实例的事件
weixin_41796631的博客
10-10 5428
$emit(event, args ) 参数： event：事件名 args：事件相关参数 用法： 触发当前实例上的事件。附加参数都会传给监听器回调。 在组件模板中，不能直接通过 v-on 绑定触发 vue 实例中的方法，而需要先使用$emit( ) 绑定自定义事件，把自定义事件发射出去（发射到html 层面）； 然后在html 层面，组件自定义元素上，绑定自定义事件和vue ...
Vue事件解读之$emit
热门推荐
FEE
03-21 2万+
Vue事件分两部分，一是DOM绑定事件，二是自定义事件。DOM事件 在Vue中可通过v-on指令或事件语法糖@来为DOM元素绑定事件// app.vue <template> <test @childevent="childEventHandler"></test> </template> methods: { childEventHandler () {} } // test.vue
vue——15-vue中的触发事件 this.$emit( 事件名 )
肖的博客
09-17 1万+
&amp;amp;amp;lt;div id=&amp;amp;quot;enjoy&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;!-- 使用$on(eventName)监听事件 使用$emit(eventName)触发事件 --&amp;amp;amp;gt; &amp;amp;amp;lt;my-btn @total=&amp;amp;quot;allc
vue中props和$emit的用法详解 Vue新手教程(2)：
weixin_44049213的博客
09-17 9438
1、父组件和子组件 首先在解释props和$emit的用法之前，先来明确一下在vue中何为父组件、子组件。 一句话总结：被调用的为子组件，调用者为父组件。举个例子如下所示： 子组件： var vm = new Vue({ el:'#app', methods:{ counter:function(e){ console.log(e) } }, data:{ name:"my name is eve" }, components:{ .
props使用
小认真靖哥哥的博客
11-04 1167
props使用
Vue3----props和emit的使用
测试
12-20 9238
props和emit
Vue.js事件绑定与组件使用详解
本文档是一份Vue笔记，涵盖了事件绑定、属性绑定、组件使用及父子组件通信等核心概念。" 在Vue.js中，事件绑定是通过`v-on`指令实现的，用于监听DOM事件并调用相应的处理函数。简写形式为`@`，例如`v-on:click=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值