Vue 子组件给父组件传值

已于 2022-05-17 13:33:47 修改
阅读量1.8k 收藏 4
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2022-05-16 16:21:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43687835/article/details/124802212
版权
本文介绍了Vue中子组件向父组件传递值的三种方式：原始prop方法、自定义事件（emit）和全局事件总线。针对每种方法的优缺点进行了说明，其中全局事件总线在Vue3中已被移除。Vue3推荐使用Composition API进行通信。
摘要由CSDN通过智能技术生成

除了全局状态管理（Vuex）、 浏览器本地存储外，目前了解到了以下几种子组件给父组件传值的方法

方法1，原始用法

  1. 父组件定义一个方法，接收参数，作为 prop 传给子组件，然后子组件调用该方法传值
// 父组件
<MyHeader :addTodo="addTodo"/>

methods: {
   
  addTodo(todoObj){
   
    this.todos.unshift(todoObj)
  },
}

// 子组件
props: [addTodo]

methods: {
   
	a(){
最低0.47元/天 解锁文章
weixin_43687835
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【Vue】子组件向父组件传值的几种方式
qq_30082553的博客
04-11 7622
自定义props可以是任何类型，包括Function。所以我们也可以利用这一点来实现子组件向父组件传值。例子：子组件CheckBoxGroup.vue-- 按钮onclick时，触发父组件checkboxConfirm事件，并携带参数selectedNames -- > < button @ click = "sendSelectedNames" > 确认 < / button > < / template >父组件App.vueimport {
vue子组件给父组件传值
有问题可以随时联系本人微信qqqqqkv
03-30 970
<template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </div> </template> <script> export default { data () { return { //将msg传递给父组件 msg: .
Vue 子组件向父组件传值
u010373106的博客
05-23 456
emit。
vue 子组件给父组件传值
果果的博客
04-24 1686
Usage： 子组件内容：&lt;template&gt; &lt;div @click="iclick"&gt;&lt;/div&gt; &lt;/template&gt; methods:{ iclick(){ let data = { a:'data' }; this.$emit('ievent',data,'l...
vue子组件向父组件传值的三种方式
bidepanm的博客
04-27 4万+
一、通过父组件给子组件传递函数类型的props实现 父组件： <Child :getChildInfo="getChildInfo"></Child> 子组件： <button @click="sendChildInfo"></button> props: ['getChildInfo'] sendChildInfo() { this.getChildInfo(数据); } 二、通过父组件给子组件绑定自定义事件实现 第一种方式： 父组件： <c
⒒ Vue子组件向父组件传值
CRMEB小程序商城的博客
01-11 1万+
组件之间传值 父组件向子组件传值使用props，参考：父组件向子组件传值！ 子组件向父组件传值，主要是以下三个步骤组成： 在子组件中自定义一个事件，使用 this.$emit('btn-click', item)的语法，emit指代发射事件，btn-click是我们自定义的事件名，item是子组件中的数据。 注意：：vue官方推荐你始终使用 kebab-case格式的事件名。 在父组件中使用v-on监听在子组件中我们自定义的数组，并为其在父组件中定义一个接收监听的事件 在父组件中接收数据 老规矩，看
VUE 子组件向父组件传值的方法
热门推荐
小布丁儿的博客
02-21 5万+
一、子组件向父组件传递一个值 子组件： 父组件： 在使用子组件时，绑定change函数的事件处理函数也可以写成如下格式： 绑定事件处理函数时，可以不带括号，形参则默认为事件对象，如果绑定时带上了括号，再想使用事件对象则需要传入$event作为实参。 二、子组件向父组件传递一个值，并携带额外参数 record为额外参数( 本文的额外参数都拿record做举例 )。 子组件： 父组件： 绑定事件处理函数时，record和$event的顺序不做要求，但是按照vue..
Vue子组件向父组件传值的几种方式
我唤来了星繁，似灭似绚烂
06-24 9224
一. 使用slot插槽 1.子组件： <template> <div> <slot name="icon" :text="text"></slot> </div> </template> <script> export default{ data(){ return {...
vue父组件给子组件传值
12-21
下面我们将详细探讨如何在Vue中实现父组件给子组件传值。 1. **Props定义**： 在Vue中，子组件通过props属性接收父组件传递的数据。在子组件的选项对象中，我们需要定义一个props数组，列出所有期望接收的属性名。...
vue 子组件向父组件传值方法
08-27
在组件化的开发模式下，有时我们需要将子组件的数据传递给父组件，以便在更高层级进行处理或显示。本文将详细讲解Vue子组件如何向父组件传递值。 一、使用自定义事件（$emit） Vue.js 提供了一种基于事件驱动的...
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
本篇将详细讲解Vue中的父子组件传值机制，包括父组件如何向子组件传递数据以及子组件如何向父组件反馈信息。 1. **父组件给子组件传值** 在Vue中，父组件向子组件传递数据主要是通过`props`属性实现的。首先，在...
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
从业计算机毕业设计10年，打算用一年时间分享10年毕设经验！
07-23 503
计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐爬虫可视化 音乐数据分析 大数据毕设 大数据毕业设计 机器学习 深度学习 人工智能
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 394
Python Formulas库，JSON格式导出导入。
vue3——利用自定义指令实现下拉框分页懒加载
最新发布
zmy967131的博客
07-24 369
vue3——利用自定义指令实现下拉框分页懒加载
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 350
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
【vueUse库Time模块各函数简介及使用方法--全篇】
xiejunlan的博客
07-23 786
vueUseTime函数基本使用示例实现使用方法注意假设的 `useTimeAgo` 函数使用方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值