VUE父组件、子组件互相传值

已于 2023-03-07 08:45:44 修改
阅读量1.5k 收藏 6
点赞数
分类专栏： 前端VUE 文章标签： vue.js 前端 javascript
于 2022-05-12 11:38:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45928161/article/details/124725995
版权

文章目录

前言

案例是三个组件之间进行传值，为了好区分，将父、子组件改名为：父组件、儿组件、孙组件，三代之间进行传值。
父组件：CreateTestPaper.vue
儿组件：editTestQue.vue
孙组件：singleAdd.vue

提示：以下是本篇文章正文内容，下面案例可供参考

一、引入组件

可参考《VUE基础知识》第六条“组件嵌套显示”，分别在父组件处引入儿组件，在儿组件处引入孙组件。
在这里插入图片描述
在这里插入图片描述
注意：在index.js中该三个组件之间并非是父子关系，父、子组件的关系是因组件被引入才形成的，被引入的是子组件，对于两个组件在index.js中的关系没有要求

二、父传子

传值顺序：CreateTestPaper.vue(父) -> editTestQue.vue(儿) -> singleAdd.vue(孙)

1. CreateTestPaper.vue(父) -> editTestQue.vue(儿)

  1. 在父组件中，引入子组件的位置上，写传值语句
    在这里插入图片描述
  2. 儿组件中，根据父组件的关键字Key，定义接收变量，接收父组件的值。之后就可以直接当作变量editTestQue调用了
    在这里插入图片描述

2. editTestQue.vue(儿) -> singleAdd.vue(孙)

与父传儿同理：

  1. 儿组件传值
    在这里插入图片描述
  2. 孙组件接收数据
    在这里插入图片描述

三、子传父

传值顺序：singleAdd.vue(孙)->editTestQue.vue(儿) -> CreateTestPaper.vue(父)

1. singleAdd.vue(孙)->editTestQue.vue(儿)

  1. 孙组件，在某个方法中写传值语句
    在这里插入图片描述
    true：用于儿组件进行判断，并非强制性，如果不需要也可以只传递一个参数即需要传递的值，只是一个参数

  2. 儿组件中，在孙组件引入的位置，根据关键字写接收语句，注意接受方法需要我们继续写
    在这里插入图片描述
    根据孙组件所发的参数个数，以及接受语句中接收方法的名称，写接收方法，在接收方法中就可以对孙组件中传递的值按照我们的意愿进行处理
    在这里插入图片描述

2. editTestQue.vue(儿) -> CreateTestPaper.vue(父)

与孙传儿一样

  1. 儿组件传值
    在这里插入图片描述
  2. 父组件接收
    在这里插入图片描述
    在这里插入图片描述

总结

无论是父传子还是子传父，关键有二：1.在子组件引入的地方做文章；2.关键字Key。

Vue组件传值之父组件向子组件传值
weixin_42855542的博客
10-31 348
看到网上，有的父传子，仅一层，在这里加个孙子，及其会出现的警告进行解决。以下开始记录，请各位多多指教： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &amp
Vue祖孙组件怎么传值
2401_84446580的博客
04-29 663
四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~祝大家都能收获大厂offer~开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】篇幅有限，仅展示部分内容。
vue3爷孙组件传值
最新发布
zero_er的博客
05-14 245
1.父传孙数据:provide2.子孙得到数据:inject。
Vue爷孙组件传值
weixin_59191637的博客
12-12 736
Vue爷孙组件传值
vue父组件给子孙组件传值（provide && inject）
weixin_41227874的博客
11-17 9092
vue框架传值常用的有： 1、父传子，在父组件里面的子组件上通过v-bind绑定一个变量传给子组件，对应的子组件里面通过props来接受； 2、子传父：在父组件里面的子组件上自定义个一个方法，用来接受子组件传上来的数据，代码示例如下： 父组件代码片段： //父组件 <condition-com :vessel="vessel" @changeLeftComponnet="changeLeftComponnet" /> // 父组件里面定义的子组件conditionCom
vue父组件向孙子组件传值,vue中父子组件传值方式
aifans_bert的博客
09-09 3216
所以要在父组件的data中定义值：二、其次，父组件要和子组件有契合点：就是在父组件中调用、注册、引用子组件：调用：注册：引用：三、接下来，就可以在父组件和子组件链接的地方（即引用子组件的标签上），把父组件的值绑定给子组件：这里我绑定了两个值，一个是数组，一个是字符串。子组件在props中定义数据，然后父组件传数据过去，例如：子组件：props:{show:{default:false}}父组件：//test是子组件名字parentShow是父组件定义的data数据。下面是其中两种我比较喜欢的写法。
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
本篇将详细讲解Vue中的父子组件传值机制，包括父组件如何向子组件传递数据以及子组件如何向父组件反馈信息。 1. **父组件给子组件传值** 在Vue中，父组件向子组件传递数据主要是通过`props`属性实现的。首先，在...
vue父组件向子组件动态传值的两种方法
08-28
在 Vue 中，父组件向子组件传值是非常常见的场景。在本文中，我们将介绍两种方法来实现父组件向子组件动态传值。 方法一：使用 Props 传值 在 Vue 中，我们可以使用 props 将数据从父组件传递给子组件。 props 是...
vue 组件间的通信之子组件向父组件传值的方式
11-20
本篇文章将详细介绍 Vue 组件间通信，特别是子组件向父组件传递值的方式。 首先，我们要理解 Vue 中的组件通信基本规则。父组件通常通过属性（props）向下传递数据给子组件，而子组件向父组件传递数据则通常通过...
vue2.0 子组件改变props值,并向父组件传值的方法
08-27
Vue 2.0 子组件改变 props 值并向父组件传值的方法 在 Vue 2.0 中，子组件改变 props 值并向父组件传值是非常常见的需求。props 是 Vue 组件之间通信的重要手段，但是在子组件中修改 props 值时需要注意避免影响父...
Vue v2.4中新增的$attrs及$listeners属性使用
wk964269669的博客
08-29 945
原文地址：https://www.jb51.net/article/132371.htm 多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点杀鸡用牛刀。Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的.
vue传值之父子组件传值、bus传值、vuex传值、其他方式传值…
Jet_Lover的博客
05-31 8400
vue之组件传值的几种方式前言一、父子组件传值二、子组件通过emit来触发父组件的自定义事件三、兄弟之间通过bus总结 前言 vue的组件传值分为三种方式：父传子、子传父、非父子组件传值 引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，emit向上传递，兄弟之间用bus。 一、父子组件传值 子组件 <template> <div class="child"> {{ message }} </div> </templa
vue爷孙组件传值
YZ_ZZZ24的博客
07-30 5821
其实$attrs和$listeners相当于是一个中转，主要用在父亲组件上。爷组件和孙组件保持以前的使用即可！
Vue 父子组件传值
贩梦的博客
04-29 1822
项目中往往会把一些常用的公共代码抽离出来，写成一个子组件。或者在一个页面中的代码太多，可以根据功能的不同抽离出相关代码写成子组件，这样代码结构会更加简洁明了，后续维护更加方便。应用组件的时候就会涉及到组件之间相互传递参数以下进行简单的介绍 在Vue项目进行父子传值主要有以下三种方法： 1. props / $emit 2. $ref 3. $parent / children
vue 父子组件传值
qq_33240556的博客
04-22 701
在 Vue.js 中，父子组件间的通信主要通过 Props 和自定义事件（$emit）来进行。
Vue中父子组件的传值
专注 专业 专心
03-16 696
在该演示中，我主要注重传值的方式，没有复杂的功能。 准备工作： 第一步：新建两个vue文件。我建立的是：parent(父组件)与son(子组件)。 第二步：在父组件中引入子组件。 a.在父组件的script中，使用import引入子组件。 import Son from './son'; // 命名随意，后面调用的时候使用的就是这里的名字 // 在引用的时候一般不存在大写字母(自动转换成小写字母...
vue父子组件传值
zt_9773的博客
11-02 725
一、vue子组件向父组件传值 1、定义子组件： 2、定义父组件： 二、父组件向子组件传值 1、定义父组件： 2、定义子组件： 3、通过ref，v-slot传：适用于，界面中点击按钮弹框填写一些信息，如新增用户或者填写一个小的表格。 <addUserRouter ref="addUser"><template v-slot: addUser></template></addUserRouter> addUserRouter为一...
Vue中父子组件传值
zhaojiaxing123的博客
06-26 204
Vue中父子组件传值
vue父组件传值子组件
09-17
### 回答1： 要在 Vue 的父组件中向子组件传递值，可以使用 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!' } } } </script> ``` 子组件： ```html <template> <div> <p>{{ message }}</p> </div> </template> <script> export default { props: { message: { type: String, default: '' } } } </script> ``` 在父组件中，我们可以使用 `v-bind` 或简写的冒号语法将 `parentMessage` 传递给子组件的 `message` 属性。在子组件中，我们可以使用 `props` 来接收传递过来的值，并在模板中使用它。 ### 回答2： Vue父组件向子组件传值可以通过props属性实现。具体步骤如下： 1. 在父组件中，通过props属性传递需要传递给子组件的值。例如，父组件中定义了一个数据属性"message"，可以通过在子组件标签中添加:message="message"的方式将该值传递给子组件。 2. 在子组件中，通过props属性接收父组件传递的值。例如，子组件中定义了一个props属性"message"，可以通过this.message访问到该值。在子组件中就可以直接使用该值。 下面是一个简单的示例代码： // 父组件 <template> <div> <h1>父组件</h1> <p>{{message}}</p> <ChildComponent :message="message" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { message: 'Hello, Vue!' } }, components: { ChildComponent } } </script> // 子组件 <template> <div> <h2>子组件</h2> <p>{{message}}</p> </div> </template> <script> export default { props: ['message'] } </script> 在上面的示例中，父组件通过props属性将message传递给子组件，子组件通过props属性接收到message并在页面中显示。 这就是Vue父组件传值给子组件的基本步骤，通过props属性可以方便地在Vue中实现父子组件之间的数据传递。 ### 回答3： 在Vue中，父组件向子组件传值是通过props属性来实现的。具体步骤如下： 1. 在父组件中定义需要传递给子组件的数据，可以是一个变量或对象。例如，父组件中定义一个变量message，值为"Hello, Vue!"。 2. 在父组件的模板中使用子组件，并通过props属性将数据传递给子组件。例如，使用<MyComponent :message="message"></MyComponent>的形式来传递数据。注意，:message表示将父组件中的message变量传递给子组件。 3. 在子组件中通过props属性接收父组件传递的值。例如，在子组件中定义props属性message来接收父组件传递的值。 4. 子组件可以通过this.message来获取父组件传递的值，并在自己的模板中进行使用。 下面是一个简单的示例代码： 父组件： ``` <template> <div> <h1>父组件</h1> <MyComponent :message="message"></MyComponent> </div> </template> <script> import MyComponent from './MyComponent.vue'; export default { data() { return { message: 'Hello, Vue!' }; }, components: { MyComponent } }; </script> ``` 子组件： ``` <template> <div> <h2>子组件</h2> <p>{{ message }}</p> </div> </template> <script> export default { props: ['message'] }; </script> ``` 在这个例子中，父组件中定义了一个message变量并将其传递给子组件。子组件通过props属性接收到message，并在自己的模板中进行使用。最终渲染结果为： 父组件： ``` <h1>父组件</h1> <MyComponent> <h2>子组件</h2> <p>Hello, Vue!</p> </MyComponent> ``` 子组件： ``` <h2>子组件</h2> <p>Hello, Vue!</p> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值