Vue在子组件中判断父组件是否传来事件

最新推荐文章于 2024-05-20 08:00:00 发布
最新推荐文章于 2024-05-20 08:00:00 发布
阅读量3.5k 收藏 5
点赞数 8
分类专栏： # js # vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43291759/article/details/117824323
版权
js 同时被 2 个专栏收录
97 篇文章 10 订阅
订阅专栏
vue
75 篇文章 17 订阅
订阅专栏

vm.$listeners

vm.$listeners 中可以找得到所以从父组件中传来的事件，它是个对象，所以我们直接查属性的形式来查找事件来判断事件是否存在。

getPullPageBottom 父级传来的事件名（我自己定义的事件名，自己写自己的）
@父级传来的事件名 = ”父级事件“
在子组件打印

  console.log(this.$listeners['getPullPageBottom'],'111')

有的话 ,会打印函数体
在这里插入图片描述

没有的话，会打印undefined
在这里插入图片描述

//this.$listeners['getPullPageBottom']
      if (!this.$listeners['getPullPageBottom']) return

在没有父级方法传入的时候做的处理

六卿
关注
  • 8
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
vue2 获取父组件挂载了什么事件
全易
12-30 619
mounted(){ console.log(this.$listeners); } 父组件 子组件打印看看：
解决vue 子组件修改父组件传来的props值报错问题
10-16
今天小编就为大家分享一篇解决vue 子组件修改父组件传来的props值报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue子组件判断是否有父组件传过来的方法
qwguo
07-08 6426
我们在vue开发过程中经常会把公用的代码封装成组件来方便其他页面调用，同时我们可以给组件传递参数和方法来供组件内部使用，这里我们介绍一下子组件中接收父组件的方法数组vm.$listeners vm.$listeners 官网解释：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。 意思是组件中用来记录父组件传过来的方法数组，用于记录父组件传给子组件的所有方法集合，我们可以使用这个数组来
详细分析Vue3中的defineEmits基本知识（子传父）
最新发布
码农研究僧的博客
05-20 3216
defineEmits 是 Vue 3 的组合式 API（Composition API）的一部分，用于在组件中定义和使用自定义事件 它替代了 Vue 2 中的 this.$emit 和 this.$on，让事件的定义和使用变得更加清晰和类型安全，尤其在 TypeScript 中
VUE查漏补缺(一): $listener跟$attrs的使用
热门推荐
m0_38005587的博客
03-15 1万+
vue中提供了很多很好用的语法糖给我们使用,其中获取原生事件.native就是一种很好的方式: 但是,正如VUE官方文档所说的: 不过在你尝试监听一个类似<input>的非常特定的元素时，这并不是个好主意。比如上述<base-input>组件可能做了如下重构，所以根元素实际上是一个<label>元素 <label> {{ la...
Vue 组件通信 scoped ref属性 is动态组件 插槽 混入 缓存组件
ILove_bugs的博客
11-29 582
v-if与v-show的生命周期影响 再深刻认识 v-if和v-show以及组件的生命周期 v-if对组件的生命周期每次都会执行一遍 而v-show只会执行一遍。 1. scoped 样式的问题 我们需要为一个.vue中的style添加一个scoped属性，以保证样式也是局部的。 <style scoped> ​ </style> app.vue中的样式是全局的 <style> ​ ​ .box{ margin:20px; ...
认识一下vue中的$attrs和$listeners属性，聊聊用法
qq_43067585的博客
07-20 678
本篇文章带大家了解一下vue中封装组件利器：$attrs、$listeners属性，看看它们的用法，希望对大家有所帮助！
Vue3中子自定义事件传值的验证
peanut
12-27 1123
vue3自定义事件
vue子组件判断父组件是否传方法过来
yxm_136452789的博客
09-21 3118
listeners用于记录父组件传给子组件的所有方法数组。
Vue：判断循环和绑定事件（狂神）
dengfengling999的博客
06-26 1147
（一）1.1：MVVM:Vue简单实现 {{ }}demo01.html： ​在控制台输入：vm.message="你好" 回车 ​动态更新： ​ 1.2：v-bind的使用 ​ ​ ​ 鼠标箭头悬浮在字体上显示：hello，vue1 ​ 在控制台进行更改，悬浮时字体动态更新​（二）条件判断语句 ：v-if v-else ​ demo02.html:if-else使用： ​在控制台更改：false ，回车​ ​if else-if .. else使用： 在
第六节：Vue组件化开发
binggoling
09-26 153
文章目录前言系列文章目录，Vue学习目录，每一章都有代码例子说明一、什么是组件二、Vue组件初次使用2.1 创建组件的第一种方式：2.2 创建组件的第二种方式：2.3 使用组件1）怎么使用Vue的创建组件？2）使用（直接用标识名称来使用组件）三、Vue组件模板的分离写法四、Vue-全局组件和局部组件五、Vue-父组件和子组件六、Vue组件数据写法七、Vue组件中的data为什么是函数八、Vue组件通信-父组件给子组件传递参数九、Vue组件通信-子组件向父组件的自定义事件 前言 本博客的内容很多都来自官网，
vue中如何让子组件修改父组件数据
08-27
在子组件中，我们可以使用 $emit 方法来发送事件给父组件，父组件可以监听这个事件来修改数据。 ``` // 在子组件中 添加 (item, index) of books" :key="index">{{item}} export default { data() { ...
vue父组件异步获取数据传给子组件的方法
10-18
这可以通过在子组件模板中使用`v-if`指令来实现： ```html <child-component v-if="parentDataAvailable" :data="parentData"></child-component> ``` 然而，仅条件渲染还不能完全满足需求。更理想的解决方案是，...
vue2.0 子组件改变props值,并向父组件传值的方法
08-27
props 是 Vue 组件之间通信的重要手段，但是在子组件中修改 props 值时需要注意避免影响父组件的状态。下面我们将讨论如何正确地改变 props 值并向父组件传值。 为什么修改 props 值？ 通常，我们修改 props 值是...
vue 子组件和父组件传值的示例
10-14
在子组件中，我们通常使用`$emit`事件触发器来向父组件发送事件，同时通过事件携带的数据来传递值。以下是一个简单的示例： ```html <!-- 子组件ChildComponent.vue --> 发送值 export default { methods: { ...
vue子页面调用父页面方法
a965925884的博客
07-28 3478
#vue子页面调用父页面方法 ##方法描述 父页面 （provide） provide() { return { onReconfigurationStatus: this.方法名, provideOnCancel: this.方法名 } }, 子页面 （inject） inject: ['provideOnCancel', 'onReconfigurationStatus'], //方法中使用 this.provideOnCancel(
Vue3 emits选项将Emit派发事件可以对参数进行验证。，web开发面试题
2401_83740129的博客
03-21 241
/ 验证失败，控制台打印vue警告及“验证失败！我是按钮1。我是按钮2。// 当验证函数中没有返回值return时，默认返回true。console.warn(‘验证失败！我是子组件{{ msg }}
vue父子组件通信
m0_47733490的博客
12-23 637
子组件传父组件： 子组件中： 在子组件的触发事件中加入 this.$emit('自己定义一个参数名称'，要传的值) 父组件中： 在父组件中，找到子组件的标签，加一个自定义监听事件，需要注意的是，事件名和子组件传过来的自定义参数名称是一致 ...
vue3组件中的事件校验emits简单使用
一个前端小白的博客
03-17 3968
直接上代码 这里没使用脚手架 主要是懒 HTML 页面 <script src="https://unpkg.com/vue@next"></script> <div id="app"> <button-list @click-event="handleClick" /> </div> js 代码关键 // 先创建一个Vue实例 const app = Vue.createApp({ data() { retur
vue 在子组件里渲染父组件的传过去的di样式
05-27
在Vue中，可以通过使用props属性传递数据和样式给子组件，然后在子组件中使用这些属性来渲染父组件传递过来的div样式。 在父组件中，通过使用v-bind指令，将样式传递给子组件： ```vue <template> <div> <child-component :divStyle="divStyle"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { name: 'ParentComponent', components: { ChildComponent }, data() { return { divStyle: { backgroundColor: 'red', color: 'white' } } } } </script> ``` 在子组件中，可以使用props属性来接收父组件传递的样式，并将其应用到子组件的div元素中： ```vue <template> <div :style="divStyle"> <slot></slot> </div> </template> <script> export default { name: 'ChildComponent', props: { divStyle: { type: Object, default: () => {} } } } </script> ``` 在这个例子中，子组件通过props属性接收父组件传递的divStyle对象，并将其通过v-bind指令应用到子组件的div元素上。 注意，在子组件中使用v-bind指令绑定样式时，需要使用冒号（:）或v-bind指令，以便将父组件传递的数据绑定到子组件中。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

六卿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值