vue爷孙组件如何互相传值

最新推荐文章于 2024-08-31 22:56:20 发布
最新推荐文章于 2024-08-31 22:56:20 发布
阅读量1k 收藏 2
点赞数
文章标签： 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 方法也是绑定在子组件上

今天你码 了吗
关注
vue 爷孙组件通信传值v-bind=“$attrs“ v-on=“$listeners“
jieweiwujie的博客
10-17 1160
1 爷爷组件写法 <father2 :position="position" @sunYe='sunYe'></father2> <template> <div class="pluginAlertName"> <el-button type="" @click="FClick">爷爷给孙子发消息</el-button> 这是爷爷的页面：name:{{name}}--age:{{age}} .
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
11-20
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父组件传递消息. 父组件做出相应的反应. 将父组件和子组件放入名为app的vue实例中 Vue.co
vue使用provide、inject进行爷孙传值。代替props
weixin_51523667的博客
07-09 359
1.在开发中在需要进行爷组件对孙组件进行传值时，如果使用prop进行传值，就会先通过props将爷组件的值传给爸组件，再通过爸组件传给孙组件，过程就会有点繁琐。这时可以通过provide提供依赖以及inject注入依赖的方式进行传值。我这里是爷组件提供一个函数，孙组件注入这个函数，就可以调用这个函数。另外，如果使用响应式的话直接修改注入的值会导致爷组件内的值改变。另外：还可以传入多个参数，如一个字符串和一个函数。这样在爷组件的方法内就能收到传过去的val。
【vue2项目】爷孙组件怎么传值和调用方法
最新发布
TanMengyi的博客
08-31 1299
有一个table上面有操作项，有查看按钮，这个table叫做爷爷组件，点击查看操作，打开弹窗又是一个table，这个table叫做父亲组件，弹窗的table上也有操作按钮，会打开第二个弹窗，第二个弹窗就是孙子组件。总结，其实，爷组件传递给孙组件的逻辑流程就是，通过爷组件首先传递给父组件，当然父组件不在props中接收，那么爷组件传递给父组件的数据就会存放到父组件的。孙子组件更新状态后，只会回到父亲组件页面，但是爷爷组件上有状态也需要更新，所以要用到爷孙通信。，这个容器对象会存放:父组件传过来的。
Vue祖孙组件怎么传值
热门推荐
小天才程序员的博客乐园
06-16 2万+
vue祖孙之间该怎么传值以及$props, $attrs, $listeners
vue爷孙组件传值
YZ_ZZZ24的博客
07-30 5427
其实$attrs和$listeners相当于是一个中转，主要用在父亲组件上。爷组件和孙组件保持以前的使用即可！
VUE爷孙组件传值
weixin_49035434的博客
09-27 2722
$attrs 是一个 Object，它包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。 如果组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。 爷爷传孙子 1.爷爷组件的代码 <template> <div id="app"> 我是App最外层的爷爷组件 <f..
vue组件爷孙级传值
weixin_49722066的博客
08-05 339
一个子组件可以会在多个父组件中使用，当某一个父组件不存在时，此时inject会中的方法会报错，给inject默认值即可。
Vue 爷孙组件通讯之：Provide / Inject 详细介绍
A_one2010的博客
06-06 1000
假设有一个组件A，A组件引入B组件（A为B的父组件） ，B组件引入C组件（B为C的父组件），即A为C的祖先组件，此时二者可以使用provide / inject进行通信。时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，层层传递非常麻烦。我们这里不让C直接改变A中的数据，而是将A改变数据的方法通过provide传给C，C执行该方法，触发改变A中的数据。以上为A向C传数据，如果C向A传数据（或者说C需要改变A中的数据），该如何做？
Vue 之孙组件向爷组件通信的实现
10-17
本篇文章将详细探讨如何实现在Vue中实现孙组件向爷组件（爷爷组件）通信的过程，通过具体的代码示例来阐述这一过程。 首先，我们要明确的是，在Vue中，组件间的通信主要有以下几种方式：props、事件（Event Emitter...
vue爷孙组件之间传值
08-26
通过以上步骤，就可以实现Vue爷孙组件之间的数据传递。请注意，父组件作为中间组件传递数据的过程中需要使用props，而子组件向父组件传递数据需要使用$emit方法。<span class="em">1</span><span class="em">2...
vue跨组件传值爷孙组件传值
坚持原创
11-04 4247
爷 <template> <div> <about></about> </div> </template> <script> import about from "./About"; export default { components: { about }, provide() { return { reload: { name:"malinshu"
VUE父组件、子组件互相传值
weixin_45928161的博客
05-12 1408
介绍了父传子、子传父
Vue3中的祖孙传值
weixin_55690518的博客
09-11 6495
当我们遇到一个父组件，里面有子组件、有孙组件，有很多后代组件时，需要共享父组件的数据，我们可以用到 ----依赖注入---- 核心就是使用provide方法，传递数据，使用inject接收数据 1、父组件向子、孙组件传值 父向子孙传数据：使用provide方法，将数据传出 父组件代码： <template> <div> <div>父子组件的交互</div> <button @click='mon...
vue祖孙组件间传值
02-07 1468
vue祖孙组件间传值
爷子孙之间传值
weixin_62515884的博客
03-03 1122
爷子孙之间传值有四种情况： 1.爷传孙 2.孙传爷 3.父传子 4.子传父 首先要创建好三个个组件，爷组件，父组件，孙组件： 爷组件： <template> <div> <div class="yeye">我是爷爷组件 </div> <router-view></router-view> </div> </template> <script> // export..
VUE祖孙组件之间的传递
qq_40943363的博客
10-22 1137
vue祖孙组件就是祖宗组件包含父组件，父组件包含孙组件，那如何把祖宗组件的值直接传递给孙子组件呢？
Vue3、Vue2中的爷爷与祖孙之间的传值
Wancc123的博客
04-20 8885
1.父传孙数据:provide 2.子孙得到数据:inject 父传孙子 import { ref, provide } from 'vue' setup() { // 直接把数据传递出去给孙子传 provide('sendInfo', 1000) }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值