vue父子组件传值

已于 2022-07-01 16:15:13 修改
阅读量2.5w 收藏 48
点赞数 8
分类专栏： # vue 前端 文章标签： vue.js 前端 javascript
于 2022-03-01 17:29:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44320032/article/details/123210556
版权
本文详细介绍了在Vue项目中遇到的父子组件通信问题。首先讲解了如何引入和调用子组件，然后阐述了父组件如何通过属性绑定将数据传递给子组件，以及子组件如何通过props接收这些值。在实际应用中，由于复杂性，最终选择了使用router-view进行路由跳转。然而在新的需求中，理解了所有方法必须在父组件中实现，将返回值传递给子组件。文中还提到了一个常见错误——属性与data冲突的解决方案，即删除子组件data中的重复声明。
摘要由CSDN通过智能技术生成

记录一下项目中遇到的问题。

因为一个流程对应一种单据，所以每次点击单据详情，应该出现相应的单据内容。在另一个页面，也需要调用这个单据内容。

因为vue不能直接调用弹出框，所以老师把单据内容写成了组件，在另一个页面直接调用这个组件就行。这个功能涉及到了父子组件传值的内容。（其实在本来显示单据内容的页面，只要根据后端传的内容判断显示哪个单据就可以，但是因为在另一个页面也需要调用单据内容，所以写成组件会更方便。由此，如果一个页面或者弹出框，在很多个页面需要用到，可以把这个地方的内容写成组件）

父子组件就是在一个vue文件中引入另一个vue文件，被引入vue文件就是子组件，引入vue文件的vue文件就是父组件。显然在项目中，单据内容的页面是子组件，引用单据内容的页面是父组件。

我们的子组件applyType.vue：

父组件：

1.父组件调用子组件

首先import 子组件名称 from 子组件地址，接着在componen

最低0.47元/天 解锁文章
芝士焗红薯
关注
专栏目录
vue中父组件向子组件传值，子组件向父组件传值，简洁易懂
qq_44849312的博客
08-18 562
父子组件传值，子父组件传值
VUE父子之间的传值（以vue3为例）
m0_60817005的博客
08-02 2784
【代码】VUE父子之间的传值（以vue3为例）
Flutter系列 - 子组件向父组件传值(flutter子组件向父组件传值)
风起云涌的博客
08-20 5967
flutter子组件向父组件传值 方法: 使用系统回调函数ValueChanged 在子组件内定义回调函数名称 ChildView({this.changeColorCallBack}); final ValueChanged<Color> changeColorCallBack; 注意ValueChanged要指定泛型 在父组件使用 child: ChildView(changeColorCallBack: (color) { setState(() {
vue-父子组件传值
PaulXerxes的博客
07-03 457
分别介绍一种常用的父组件向子组件传值和子组件向父组件传值的方法。 父组件向子组件传值：props 首先建立组件father.vue和child.vue作为示例的基础，在子组件中的prop定义：希望父组件传递并在子组件使用的数据，父组件在child标签中传递参数，既可以使用v-bind传递父组件的动态数据，也可以直接传递静态的值。 father.vue //父组件 <template> <div> <h1>我是父组件！</h1> <child :Msg="
Vue 父子组件传值
贩梦的博客
04-29 1587
项目中往往会把一些常用的公共代码抽离出来，写成一个子组件。或者在一个页面中的代码太多，可以根据功能的不同抽离出相关代码写成子组件，这样代码结构会更加简洁明了，后续维护更加方便。应用组件的时候就会涉及到组件之间相互传递参数以下进行简单的介绍 在Vue项目进行父子传值主要有以下三种方法： 1. props / $emit 2. $ref 3. $parent / children
vue 父子组件传值
weixin_46591962的博客
03-23 131
1.父组件-------传值------>子组件 在父组件中声明一个vue变量并指定该变量的变量值 如下图 :urlPrivacy 是传给子组件的变量值，urlPrivacy 是在父组件中的全局变量 urlPrivacy 全局变量的声明 urlPrivacy 全局变量的的赋值 注意 一定要使用this关键字，this一般指的是当前vue示例 在子组件中 使用props来接收父组件传递过来的变量urlPrivacy 直接在子组件中使用urlPrivacy变量就行了 2.子组件------传值
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 父组件给子组件传值
最新发布
qq_30517167的博客
09-12 461
},data() {return {parentData: '这是从父组件传来的数据'
vue父组件与子组件之间传值
热门推荐
weixin_42855400的博客
02-19 2万+
父组件像子组件传值：v-bind进行绑定：（自定义属性） 父组件 其中counts是自定义属性，它的值是传给子组件的 子组件 子组件通过props属性，counts是父组件传过来的值 子组件向父组件传值（自定义事件） ...
Vue父子组件传值
weixin_42113716的博客
09-05 253
Vue父子组件传值
vue父组件给子组件传值
蜗牛的博客
08-21 908
父组件： &lt;template&gt; &lt;div class="app"&gt; &lt;child :date="msg"&gt;&lt;/child&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; import child from './child.vue
vue.js基础中父子组件之间的传值
g_xlike的博客
04-14 1530
组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：父子关系，兄弟关系，隔代关系（可能隔多代）。这里我们将父子关系的传值针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了 vue 父子组件间通信的几种方式，如 props、emiton、vuex、$parent / $children、以通俗易懂的实例讲述这其中的差别及使用场景，希望对小伙伴有些许帮助。
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中实现父子组件之间传递数据的两种常用方法。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

芝士焗红薯

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

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

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

打赏作者

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

抵扣说明：

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

余额充值