子组件往父组件传值 失败的三个问题

已于 2022-11-16 19:52:35 修改
阅读量3.5k 收藏 5
点赞数 5
分类专栏： vue 文章标签： javascript vue.js
于 2022-04-24 17:45:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52421092/article/details/124387973
版权

第一个问题：传入的事件名只能是小写 不可以是驼峰命名法

第二个问题： 就是vue2写法：this.$emit("事件名"，'传给父组件的数据')

但是vue3不能像上面了

vue3写法 ： this.$parent.$emit("事件名"，'传给父组件的数据')

第三个问题是 用$emit()的时候是一个递归组件 有时候用不了 有时候能用 给递归组件加上v-on="$listeners" 问题就会解决

 

 

郑建零零发
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【Vue】子组件向父组件传值的几种方式
qq_30082553的博客
04-11 7634
自定义props可以是任何类型，包括Function。所以我们也可以利用这一点来实现子组件向父组件传值。例子：子组件CheckBoxGroup.vue-- 按钮onclick时，触发父组件checkboxConfirm事件，并携带参数selectedNames -- > < button @ click = "sendSelectedNames" > 确认 < / button > < / template >父组件App.vueimport {
vue 中子组件调用父组件方法(子组件向父组件传值)的三种实现
m0_37148591的博客
04-08 3999
1、前言 日常积累，欢迎指正 2、正文 vue2.6.11 博客正文为三种方法的核心代码记录，源代码在 vue-project 的分支 dev-005 ,可以直接获取代码运行查看 2.1、子组件中直接 this.$parent.parentNameInParentMethod() /** 父组件 */ export default { methods: { search...
vue中如何让子组件修改父组件数据
08-27
主要介绍了vue中子组件修改父组件数据的相关资料，文中介绍了vue中watch的认识，关于子组件修改父组件属性认识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
⒒ Vue子组件向父组件传值
热门推荐
CRMEB小程序商城的博客
01-11 1万+
组件之间传值 父组件向子组件传值使用props，参考：父组件向子组件传值！ 子组件向父组件传值，主要是以下三个步骤组成： 在子组件中自定义一个事件，使用 this.$emit('btn-click', item)的语法，emit指代发射事件，btn-click是我们自定义的事件名，item是子组件中的数据。 注意：：vue官方推荐你始终使用 kebab-case格式的事件名。 在父组件中使用v-on监听在子组件中我们自定义的数组，并为其在父组件中定义一个接收监听的事件 在父组件中接收数据 老规矩，看
Vue父组件向子组件传值简单示例
小怪獸丶的糖的专栏
01-31 721
在Vue中父组件向子组件传值。 首先在父组件中将要传递的变量赋值给子组件 <子组件 ：变量=数据></子组件> 然后子组件中定义props变量 props:['变量'] 具体例子如下： 首先在components中创建三个组件 Header.Vue 、Swiper.Vue、 Footer.Vue,然后在App.Vue中引入组件并定义要传递的数据。这里主要是将a数据传递给Header,arr传递给Swiper <template> <div> <
Vue3子组件向父组件传值
geejkse_seff的博客
03-06 6593
子组件向父组件传值核心的部分是emit事件，子组件绑定一个emit触发事件，父组件监听事件就可以达到子组件向父组件传值的目的。 这里我们编写一个计数器的案例。 首先我们先展示子组件和父组件的代码： <template> <div> <button @click="increment">+1</button> <button @click="decrement">-1</button>
React（函数组件）父组件和子组件之间的传值
weixin_44741164的博客
04-15 1万+
react父组件和子组件之间传值
【子组件和父组件相互传值】el-dialog
努力的搬砖人
01-09 1378
子父组件相互传值
Vue3-实现父组件向子组件传值
LCKNOW的博客
03-06 865
如何把父组件中的东西传到子组件中去 传一个字符串常量 传一个变量、方法、方法名 定义一个ref()式儿的变量 let x = ref() x装的是Person.vue组件的实例 但只能看到iPerson.vue中写在 defineExpose({})里的数据
图文介绍Vue父组件向子组件传值
08-28
子组件通常包含`<template>`, `<script>`和`<style>`三个部分，其中`<script>`部分用于定义组件逻辑和接收父组件传递的数据。 ```html <!-- Child.vue --> <!-- 在这里使用接收到的父组件数据 --> {{ ...
VUE子组件向父组件传值详解（含传多值及添加额外参数场景）
10-14
### 三、子组件向父组件传递多个值 当需要传递多个值时，可以将它们都作为`$emit`的参数。父组件的事件处理函数需要定义相应的参数来接收这些值： ```html <!-- 子组件 --> ...
Vue父子组件传值的一些坑
10-14
本文将深入探讨Vue父子组件传值时可能遇到的问题，以及如何解决这些问题，同时还会涉及到JavaScript中的深拷贝和浅拷贝概念。 1. 问题描述： 在Vue中，当你从父组件向子组件传递一个对象时，如果子组件直接修改了这...
vue父子组件传值案例
04-26
在这个“vue父子组件传值案例”中，我们将深入探讨Vue 2.x版本中的父子组件通信机制，包括父组件如何向子组件传递数据以及子组件如何向父组件发送消息。 一、父组件向子组件传值 在Vue中，父组件向子组件传递数据...
Vue三种常用传值示例(父传子、子传父、非父子)
10-18
本文将详细介绍三种常见的Vue组件传值方式：父组件向子组件传值、子组件向父组件传值以及非父子组件之间的传值。 1. **父组件向子组件传值** 在Vue中，父组件向子组件传递数据通常通过`props`属性实现。首先，在父...
Taro开发之子组件传值给父组件
qq_44592531的博客
03-17 1533
子组件传值给父组件 首先 子组件（组件名“Child”）内定义一个方法 例如 sendData = () => { let data = ‘1234’; this.props.getData(data); //这个this,props.xxx 后面的xxx是是在父组件那使用的名字; }， 然后可以在render函数后使用这个方法或者另外定义一个事件去触发该方法进行传值， 之后可在父组件(Parent)内使用这个方法获取拿到的值: Parent组件内：首先定义一个方法getData或者其他什么都可以随
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 677
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 248
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 525
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
vue子组件向父组件传值的三种方式
08-24
Vue子组件向父组件传值的三种方式包括使用props、使用自定义事件和使用回调函数。使用props是最常见的方式，父组件通过props向子组件传递数据，子组件可以直接使用这些数据。[1]第二种方式是通过在父组件向子组件传递一个函数，子组件在事件触发时调用这个函数，并将自己的数据作为参数传递给父组件，从而实现父子组件之间的相互通信。第三种方式是在子组件中触发一个自定义事件，并在事件响应时通过调用父组件传递的方法将数据传递给父组件。这三种方式可以根据具体的需求选择合适的方法来实现子组件向父组件传值。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [深度理解Vue组件的子组件向父组件传递数据的通信方式，全面详细，看这一篇就够了，推荐收藏](https://blog.csdn.net/czjl6886/article/details/121588740)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值