vue中父组件中在引入的子组件中监听自己的click事件

最新推荐文章于 2024-05-31 09:30:00 发布

转载最新推荐文章于 2024-05-31 09:30:00 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/11871779/2328124

文章标签：

#javascript #ViewUI

本文详细介绍了Vue中父组件如何通过prop将数据传递给子组件，以及子组件如何触发事件给父组件。特别强调了当父组件想在子组件上监听自己的click事件时，需要使用native修饰符这一关键细节。

1 子组件box.vue:

2 父组件test.vue

效果：

总结

1 父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。

转载于:https://blog.51cto.com/11871779/2328124

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33888907

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定

我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！

06-10

1582

原生事件修饰符.native ,关于组件标签上的事件在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理

Vue 自定义组件@click 无效解决方法

JIZQAQ学习&踩坑笔记本

05-12

1285

父组件中我写了一段这个，大概就是封装了一个小卡片，外面用了个list <div v-for="item in likeList.list" :key="item.likeId"> <me-like-item :item="item" :current="currentItem" @click="clickCurrent(item)"></me-like-item> </div> 业务需要呢，我每次点击一个卡片的时候，卡片背景颜色和字体什.

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

vue 子组件监听父组件的点击事件

qq_38884788的博客

07-17

3503

使用vue-vant tab切换点击时只有点击的时候才加载数据，没有都用vant中的tab切换因为vant的tab切换滚动条不能固定 父组件中的子组件写法 <div @click=“onclick”> export default { onClick(name) { this.name = name; if(name == 1){ this.focusNewsActive = true; } this.$refs.sonV.onClick(this.focusNewsActive); },

vue使用$emit时,父组件无法监听到子组件的事件实例

08-27

下面小编就为大家分享一篇vue使用$emit时,父组件无法监听到子组件的事件实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue中关于自定义组件定义@click事件不生效的解决办法

Mxt623的博客

10-12

2504

比如：如果使用router-link标签，加上@click事件，绑定的事件会无效，因为router-link的作用是单纯的路由跳转，会阻止click事件，如果不加。就是在子组件中添加this.$emit ( “事件名” ，value )方法将子组件的值传到父组件再进行处理。当你给一个vue组件或者是自定义组件绑定事件的时候，要加上native，如果是普通的html元素，就不需要。还有另外一种解决方式。

Vue子组件监听父组件的事件

彭世瑜的博客

11-21

8988

正常情况下，父组件可以监听子组件传递过来的事件，那么子组件怎么监听父组件的事件呢？实际案例：假设子组件是一个弹框表单，子组件里边我预留了一个按钮位置，用于【添加数据】或者【编辑数据】按钮，点击按钮，子组件显示弹框。示例一：整个组件监听事件 <template> <div @click="changeVisiable"> <slot></slot> <div v-show="visiable">显示隐藏的内容</div

vue打开子组件弹窗都刷新功能的实现

10-14

在子组件中，通过监听`addOrUpdateVisible`的变化，可以实现当父组件改变这个值时，子组件内部的`showDialog`也相应更新，从而控制弹窗的显示。总结来说，Vue中实现打开子组件弹窗并刷新功能的关键在于： 1. 使用...

解决vue组件中click事件失效的问题

10-16

本文主要探讨如何解决Vue组件中`click`事件失效的问题，并结合实际案例进行分析。首先，让我们来了解一下Vue中的事件绑定机制。Vue使用的是`.sync`或`v-on`指令来处理DOM事件监听。例如，`@click`是`v-on:click`的...

在vue2中，父组件引入子组件，子组件在引入父组件

05-29

在Vue2中，父组件引入子组件，可以使用Vue的组件化开发方式，通过`import`语句引入子组件，再在父组件的`components`属性中注册子组件，然后在父组件的模板中使用子组件即可。而在子组件中引入父组件，则可以通过`...

vue3父组件监听子组件err事件

最新发布

04-02

父组件引入子组件并在模板中使用它时，可以利用 `v-on:err` 或者简写的 `@err` 来监听该事件，并指定处理函数。示例代码如下： - 子组件 (ChildComponent.vue): ```vue <button @click="triggerError">...

解决Vue.js父组件$on无法监听子组件$emit触发事件的问题

10-18

今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

详解vue中在父组件点击按钮触发子组件的事件

01-18

我把这个实例分为几个步骤解读： 1、父组件的button元素绑定click事件,该事件指向notify方法 2、给子组件注册一个ref=“child” 3、父组件的notify的方法在处理时，使用了$refs.child把事件传递给子组件的parentMsg方法，同时携带着父组件中的参数msg 4、子组件接收到父组件的事件后，调用了parentMsg方法，把接收到的msg放到message数组中 父组件  <input v-model=msg /> <button v-on:click=notif

Vue中事件绑定与监听（父、子组件数据传递）

zwl2220943286的博客

05-31

972

父子组件之间如何传递参数，如何自定义组件

vue组件之监听子组件事件

悦.L的博客

11-07

7204

上一篇内容我们了解了vue组件中关于prop选项的内容，props选项实现了父组件和子组件的数据传递，这篇我们将了解一下子组件向父组件进行通信。 $emit()方法 子组件使用 $emit()方法触发父组件事件。在父组件中通过v-on指令监听子组件的自定义事件，然后自定义事件执行 $emit()方法触发父组件事件，这样就可以实现子组件和父组件之间的通信 <div id="app"> <post-item :value="arr" @greet="fatherCl.

vue 父组件 监听子组件 事件（强制刷新子组件的）

Mr丶Yang

07-08

6029

子组件改变父组件传递的参数不刷新 ① 子组件上添加 v-if ② 父组件 监听数据 this.reFresh= false this.$nextTick(()=>{ this.reFresh = true }) ##具体实现 子组件 <template> <a-input> <a-ico...

vue父组件调用子组件的事件方法

github_38255510的博客

07-12

2987

子组件：foods<div id='app'> <div class="box" v-show="showFlag">11111111111111</div> </div><script>export default({data(){return{showFlag:false}},methods:{ show(){

vue --- > 子组件监听点击事件,接收父组件参数.实现对应跳转

栗子好好吃的博客

09-30

1545

开始 vue中子组件这一块,有点麻烦。不是说它很难,而是它的传送数据方式,以及和各种前端后端路由混在一起时,如果不清晰很容易就迷茫下面假设: 路由配置文件为:router.js 父组件为 parent.vue , 路径为 ./parent.vue 子组件1为 child1.vue, 路径为 ./child1.vue 子组件2为 child2.vue, 路径为 ./child2.vue 父组件中...

vue---vue2.x中父组件如何触发子组件事件方法？