vue爷孙组件如何互相传值

最新推荐文章于 2024-05-07 01:35:01 发布
最新推荐文章于 2024-05-07 01:35:01 发布
阅读量1k 收藏 1
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50249353/article/details/130151541
版权

起因

vue传值经常使用父传子和传父，但是当需要子组件中的子组件和父组件传值的时候 使用父传子就比较麻烦了 需要连续传两次 而使用 provide 和inject 只能单方面传值不能互相传值 所以用到 了 $attr 和 $listeners

使用方法

看图即可
在这里插入图片描述
图上的意思是 爷给孙传值的时候 先给子绑定属性 这个时候相当于父亲传给子 子组件不需要props 只需要this. a t t r s 来那值当给孙组件传值的时候给它绑定 v − b i n d = " attrs来那值 当给孙组件传值的时候 给它绑定 v-bind=" attrs来那值当给孙组件传值的时候给它绑定v−bind="attr" v-on=“$listeners” 一个是属性 一个是方法
然后给孙组件使用props 接受参数

孙给爷传也是用$emit 方法也是绑定在子组件上

今天你码 了吗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3父子组件传值.doc
02-05
vue3父子组件传值
Vue非父子组件之间传值
01-08
非父子组件间的传值(bus/总线/发布订阅模式/观察者模式) // 在每一个组件上添加BUS属性 Vue.prototype.bus = new Vue() Vue.component('child',{ props:{ content:String }, data(){ //子组件不能直接修改...
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
11-20
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父组件传递消息. 父组件做出相应的反应. 将父组件和子组件放入名为app的vue实例中 Vue.co
组件之间传值的8种方式
2301_76348120的博客
07-29 2613
组件之间传值的8中方式
Vue祖孙组件怎么传值
最新发布
2401_84094029的博客
05-07 638
😀 其实到这里还没有结束，接着聊聊 inheritAttrs 吧。不过这和传值之间关系不大。inheritAttrs 是 vue 2.4.0 的新增选项，官方的介绍是酱紫的。1️⃣ 默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。
Vue 之孙组件向爷组件通信的实现
10-17
主要介绍了Vue 之孙组件向爷组件通信的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue祖孙组件传值
peter_hzq的博客
11-08 6956
祖传孙 方法一：props 传递次序：GrandFather → Father → GrandSon 1、在 GrandFather 中给 Father 传递了一条消息。 GrandFather.vue <template> <div class="parent"> ????爷爷 <Father :msg1="msg1" :msg2="msg2" /> </div> </template> <script> i
vue爷孙组件传值
YZ_ZZZ24的博客
07-30 5291
其实$attrs和$listeners相当于是一个中转，主要用在父亲组件上。爷组件和孙组件保持以前的使用即可！
vue 孙组件给爷组件传递数据,本质层层传递
tenc1239的博客
08-26 1732
Child,},methods: {// 必须在中间组件 定义事件// 在这里处理数据
Vue3、Vue2中的爷爷与祖孙之间的传值
Wancc123的博客
04-20 8661
1.父传孙数据:provide 2.子孙得到数据:inject 父传孙子 import { ref, provide } from 'vue' setup() { // 直接把数据传递出去给孙子传 provide('sendInfo', 1000) }
vue组件通信
qq_46376192的博客
12-31 2653
vue组件通信
vue祖孙组件间传值
02-07 1411
vue祖孙组件间传值
在Vue中，向上通信（从孙子到爷爷）的常用方法有以下几种：
涂涂
05-11 3300
访问根组件，再使用深度优先搜索遍历其子孙组件，找到爷爷组件，调用其方法。注：这里提供的只是几种可能的方法，具体使用要根据实际情况选择。获取爷爷组件中的属性或方法，间接调用其方法。访问爷爷组件，调用其方法。提供一个函数或对象，让孙子组件使用。下面简单介绍这三种方法的使用。vue3.0照例只是写法改变。
VUE爷孙组件传值
weixin_49035434的博客
09-27 2624
$attrs 是一个 Object，它包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。 如果组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。 爷爷传孙子 1.爷爷组件的代码 <template> <div id="app"> 我是App最外层的爷爷组件 <f..
【Vue2】父子组件传参 && 孙子调用爷爷的方法 provide inject
weixin_47375144的博客
06-08 2944
这里切记：通过props接受到的值是不能改变的，如果要改变只能重新再子组件定义，然后通过watch将父组件的值传给该定义好的属性，即可渲染。若inject:[‘方法名报错’]，则可更改为。provide抛出去。
Vue组件间传值（超全，跨代）父传子，子传父，爷传孙，孙传爷，保姆级讲解
热门推荐
SJJ980724的博客
10-19 1万+
前言 看了很多vue组件间传参的帖子，发现很多不完整，今天闲来无事总结一下vue组件间传值，此文涉及到：父传子，子传父，爷传孙，孙传爷的组件间传值，应该能满足日常开发所需。 本次用到的三个组件分别命名为：Father，Son，GrandSon 一、父传子 .........
vue父组件给子孙组件传值（provide && inject）
weixin_41227874的博客
11-17 8860
vue框架传值常用的有： 1、父传子，在父组件里面的子组件上通过v-bind绑定一个变量传给子组件，对应的子组件里面通过props来接受； 2、子传父：在父组件里面的子组件上自定义个一个方法，用来接受子组件传上来的数据，代码示例如下： 父组件代码片段： //父组件 <condition-com :vessel="vessel" @changeLeftComponnet="changeLeftComponnet" /> // 父组件里面定义的子组件conditionCom
爷子孙之间传值
weixin_62515884的博客
03-03 1058
爷子孙之间传值有四种情况： 1.爷传孙 2.孙传爷 3.父传子 4.子传父 首先要创建好三个个组件，爷组件，父组件，孙组件： 爷组件： <template> <div> <div class="yeye">我是爷爷组件 </div> <router-view></router-view> </div> </template> <script> // export..
vue爷孙组件之间传值
08-26
在Vue中，爷孙组件之间的数据传递是通过props和$emit来实现的。爷孙组件之间不能直接通信，需要通过父组件作为中间组件传递数据。具体实现步骤如下： 1. 在祖父组件（GrandFather.vue）中，定义要传递的数据msg1和msg2，并在模板中将数据传递给父组件（Father）。 2. 在父组件（Father.vue）中，接收来自祖父组件的数据msg1和msg2，并将其作为props传递给子组件（GrandSon）。 3. 在子组件（GrandSon.vue）中，通过props接收来自父组件的数据msg1，并在需要的地方使用。 4. 如果子组件需要向爷爷组件传递数据，则在子组件中通过$emit方法触发一个自定义事件，并将数据作为参数传递给爷爷组件。 5. 在爷爷组件中，通过监听子组件的自定义事件，将接收到的数据绑定到data中的reply属性上，以便在视图层渲染。 通过以上步骤，就可以实现Vue爷孙组件之间的数据传递。请注意，父组件作为中间组件传递数据的过程中需要使用props，而子组件向父组件传递数据需要使用$emit方法。<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/qq_40738077/article/details/106765455)[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_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值