vue 父子组件传值

已于 2022-01-19 15:33:40 修改
阅读量3.6k 收藏 32
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
于 2022-01-19 15:21:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/samscat/article/details/122581634
版权

父传子：
父组件 通过 v-bind 绑定属性传值给子组件，使用 : 缩写；
子组件 通过props 接收父组件的传值。

子传父：
子组件 通过$emit(‘keyName’, value) 传值给父组件；
父组件 通过在子组件上绑定v-on:keyName =“getSomething” 获取，使用@ 缩写；

其他方法：
vue bus: 通过vue事件总线的方法，可以跨级传递，也即通过 e m i t ( ) 和 emit()和 emit()和on(),所以vue3是不支持的了；
provide / reject: 推荐只传不改的，因为通过这个方法传递的数据失去了即时响应的特性；
vuex: 全局组件的数据存取都可以，用得上

samscat
关注
  • 0
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue父子组件传值
upStar1的博客
03-01 2万+
记录一下项目中遇到的问题。 因为一个流程对应一种单据，所以每次点击单据详情，应该出现相应的单据内容。在另一个页面，也需要调用这个单据内容。 因为vue不能直接调用弹出框，所以老师把单据内容写成了组件，在另一个页面直接调用这个组件就行。这个功能涉及到了父子组件传值的内容。（其实在本来显示单据内容的页面，只要根据后端传的内容判断显示哪个单据就可以，但是因为在另一个页面也需要调用单据内容，所以写成组件会更方便。由此，如果一个页面或者弹出框，在很多个页面需要用到，可以把这个地方的内容写成组件） ......
vue子父组件传值
weixin_44388435的博客
04-10 111
父组件向子组件传值 在父组件中使用子组件，并且向其传递数据，子组件同时调用父组件的方法 页面中： <div id="app"> <ul> <people-item v-for="people in peoples" :key="people.id" ...
vue子父组件传值及事件
weixin_43431702的博客
06-11 177
1、子组件接收父组件传递的数据 父组件 menus_items.vue的代码(做的是一个添加el-dialog功能) <template> <section class="SystemSchool"> <!--创建学校 --> <el-dialog title="创建学校" width="900px" ...
vue-父子组件传值
PaulXerxes的博客
07-03 455
分别介绍一种常用的父组件向子组件传值和子组件向父组件传值的方法。 父组件向子组件传值：props 首先建立组件father.vue和child.vue作为示例的基础，在子组件中的prop定义：希望父组件传递并在子组件使用的数据，父组件在child标签中传递参数，既可以使用v-bind传递父组件的动态数据，也可以直接传递静态的值。 father.vue //父组件 <template> <div> <h1>我是父组件！</h1> <child :Msg="
Vue父子组件传值的一些坑
10-14
本文将深入探讨Vue父子组件传值时可能遇到的问题，以及如何解决这些问题，同时还会涉及到JavaScript中的深拷贝和浅拷贝概念。 1. 问题描述： 在Vue中，当你从父组件向子组件传递一个对象时，如果子组件直接修改了这...
vue父子组件传值案例
04-26
在这个“vue父子组件传值案例”中，我们将深入探讨Vue 2.x版本中的父子组件通信机制，包括父组件如何向子组件传递数据以及子组件如何向父组件发送消息。 一、父组件向子组件传值 在Vue中，父组件向子组件传递数据...
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
**一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤： - 在父组件中导入并注册子组件，例如： ```javascript import HomeChild from './...
vue-子父组件传值源代码
06-29
一个自己搭建的项目，简单易学，包括子传父和父传子实例，也可看源码详情请见博客链接：https://blog.csdn.net/weixin_39332529/article/details/106985173
vue界面传值（子父组件）
韩万杰的博客
09-15 1202
父组件<template> <div> <div class="rootViewstyle"> <titleview model="1123" @touch="touchbtn"></titleview> </div> </div> </template><script> import titleview from "./
vue子父组件之间的传值
热门推荐
小白的博客
11-29 1万+
目录 1、父组件向子组件传值 其他接收方式总结： 2、子组件向父组件传递数据 找到了两张比较清晰的图片， 1、父组件向子组件传值 子组件需要用props来接收数据，父组件需要动态绑定想要传递给子组件的数据 父组件：:chooseAllData="tableData" 子组件： props: { chooseAllData:{ default:11111 } }, 其他接收方式总结： 2、子组件向父组件传递数据 子组件： <.
vue子组件和父组件传值
web前端菜鸟工程师
06-19 1635
vue子组件和父组件传值 近期在学习vue，总结了一下子组件和父组件间传值的方法： 父组件向子组件传值 子组件向父组件传值 父组件向子组件传值 父组件向子组件传递数据主要通过props来进行传递。子组件想使用子组件的方法，要通过$emit来调用。 示例 在父组件中使用子组件，并且向其传递数据，子组件同时调用父组件的方法 页面中： &amp;lt;div id=&quot;a...
vue父子组件互相传值
林小喵的博客
10-07 3939
官网上有较详尽的介绍：http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 以下是本人项目实践后的个人总结： eg:如定义一个分页组件      基本思路：                    父组件传送总页数和当前页数给子组件（直接在注册里传过去。。                
vue 子 父组件 传值 总结 兄弟组件传值总结
gaoqiang1112的博客
04-02 336
vue 中 兄弟组件如何传值呢 可能大家都回答的是eventBus 其实就是 利用一个js文件再new 出一个vue对象 然后进行 emit 和on 的触发与监听 但其实 我们有更简单的方法 第一种 a组件 点击按钮 利用 emit 触发 名叫 cl2c2的监听 传输的值为 ‘哈哈哈哈’ b组件 mounted阶段 组件b利用 $on 监听 cl2c2 方法 接收 值 ...
vue 子组件父组件相互传值
ranran_sun的博客
01-17 1678
关于子父组件相互传值，做了一个翻译的小demo：https://github.com/ranransun/vue-translate/父组件向子组建传值---props父组件：数据部分：模版引用组件的部分子组件：两个红框框的名字是一样的，笔者在写的时候报过这样的错误props还有更严谨的写法，即传值和传引用是不一样的效果：属性传值可以传具体的值，也可以传引用（Array，object），传引用的时...
关于vue中子组件给父组件传值
月来better
01-16 215
子组件页面---------》EditList: <template> <div class="editList"> <el-button type="primary" @click="goListPage">我是子组件</el-button> </div> </template> <script> export default { name: 'EditList', data(){ re.
Vue组件通信：子组件向父组件传值（详解 & 代码示例）
qq_53322872的博客
07-07 1万+
文章主要讲述了父组件如何获取子组件的数据。笔者将其分为了”子组件主动发送”和“父组件主动获取”两种情景并配以详细的代码示例。
vue 父子组件传值
最新发布
04-26
Vue是一种流行的JavaScript框架，用于构建用户界面。在Vue中，父子组件之间传递数据是一种常见的需求。以下是一种常用的方法来实现父子组件之间的数据传递： 1. Props（属性）：父组件可以通过props属性向子组件传递数据。在父组件中，通过在子组件标签上绑定属性的方式传递数据。在子组件中，可以通过props选项接收并使用这些数据。 父组件： ```html <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent component' }; } } </script> ``` 子组件： ```html <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'] } </script> ``` 2. $emit（自定义事件）：子组件可以通过$emit方法触发自定义事件，并将需要传递的数据作为参数传递给父组件。在父组件中，通过在子组件标签上监听自定义事件的方式接收数据。 父组件： ```html <template> <div> <child-component @child-event="handleChildEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleChildEvent(data) { console.log(data); // 在这里处理子组件传递的数据 } } } </script> ``` 子组件： ```html <template> <div> <button @click="emitEvent">触发事件</button> </div> </template> <script> export default { methods: { emitEvent() { this.$emit('child-event', 'Hello from child component'); // 触发自定义事件，并传递数据给父组件 } } } </script> ``` 以上是Vue中实现父子组件之间传递数据的两种常用方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值