vue组件祖先/父亲/孙子传值：props, provide,inject,$attrs,$listeners,$emit,$on,

最新推荐文章于 2024-06-06 15:24:33 发布
最新推荐文章于 2024-06-06 15:24:33 发布
阅读量1.5w 收藏 29
点赞数 7
分类专栏： vue组件完美 文章标签： vue组件传值完美
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41357391/article/details/88430639
版权

vue组件之间的传递分类：
1、父向子传递：props
2、子向父传递： e m i t 3 、 兄 弟 之 间 传 递 ： 借 助 中 间 代 理 ： emit 3、兄弟之间传递：借助中间代理： emit3、兄弟之间传递：借助中间代理：emit,$on
4、祖先传给孙子：这个高级provide,inject

父子关系：parent =>children
祖先和孙子关系：parent=>grandSon
parent.vue
在这里插入图片描述
children.vue

在这里插入图片描述
这里的：
$attrs收集器:收集属性
$listeners收集器：收集事件
收集器收集会排除（props,class,style…）
在这里插入图片描述
grandSon.ue
在这里插入图片描述
在这里插入图片描述
兄弟之间传值：借助中间代理=》com.js 抛出一个实例化
$on:监听当前实例上的自定义事件。
$emit触发回调函数事件
把两个自组件first.vue/second.vue放到同一个父组件里面common.vue
first.vue
在这里插入图片描述
second.vue
在这里插入图片描述
common.vue
在这里插入图片描述
com.js
在这里插入图片描述
点击按钮之前
在这里插入图片描述
点击按钮之后
在这里插入图片描述
组件的问题这些差不多了，在项目开发中灵活运用，当然使用vuex也能完美的做到。同时面试官也喜欢问这类的问题。。。。。
欢迎大神指点！！

小白之路！
关注
  • 7
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue组件通信$attrs、$listeners实现原理解析
10-14
主要介绍了Vue组件通信$attrs、$listeners实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue祖孙组件怎么传值
热门推荐
小天才程序员的博客乐园
06-16 2万+
vue祖孙之间该怎么传值以及$props, $attrs, $listeners
Vue 爷孙组件通讯之：Provide / Inject 详细介绍
最新发布
A_one2010的博客
06-06 594
假设有一个组件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 孙子组件获取祖先组件数据
Bruce小鬼
11-14 1761
Provide/Inject非常简单，就像vue页面中使用的data对象一样，但是他与data也是有区别的。下面来介绍下他怎么使用，以及使用时遇到的问题。// 在provide定义一个name数据 provide() {return {return {info : "1号" , } } ,console . log("子组件获取祖先组件数据" , this . name) } } } < / script >
Vue中，子组件如何访问祖先组件中的数据
weixin_51341142的博客
10-21 507
任何后代的组件树，无论层级有多深，都可以**注入**由父组件提供给整条链路的依赖。这里，组件本地化了原注入名 `"message"` 所提供的的属性，并将其暴露为 `this.localMessage`。祖先提供了暴露的数据，在使用该数据的子组件中我们需要注入之后才能使用
vue组件之祖孙传后代provide和inject
Sunday97的博客
06-12 2090
首先祖先给子孙后代传递也是可以用props传递，一层层传递，爷爷给孙子还好，但是嵌了五六层还这么写，就显得非常麻烦了。 所以就用到了provide(提供)和inject(注入)。这两个是配套使用的，以允许祖先向所有祖先后代注入一个依赖。 provide: 是一个对象或者是一个返回对象的函数。里面就是所有要给后代的东西，也就是一对对属性和值 inject: 一个字符串数组或者是一个对象，属性值也可...
vue爷孙组件参数传递
qq_35490522的博客
08-08 596
data() { return { msg: 'A' } }, provide() { return { message: this.msg } } 父组件： components:{child}, inject:['message'], 子组件： inject: ['message'], .
vue组件间通信六种方式（总结篇）
10-17
$attrs" v-on="$listeners"></div> ``` 5. **`provide` / `inject`** - **`provide`** 和 **`inject`** 用于祖孙组件间的通信，无需通过中间父组件。祖先组件提供变量，后代组件可以注入这些变量。 ```js // ...
vue组件之间通信方式实例总结【8种方式】
10-17
- Vue的`provide`和`inject`选项允许祖先组件向其所有后代组件提供数据，而不必通过中间组件。祖先组件提供数据，后代组件通过`inject`选项注入数据。 5. **Event Bus（事件总线）** - 创建一个全局的Vue实例作为...
vue组件 孙组件 调用爷组件（祖父组件）的方法
暂时还没想好博客简介
11-14 9746
vue组件 孙组件 调用爷组件（祖父组件）的方法
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
10-15
主要介绍了vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现组件隔代通信（在孙组件调用爷组件的方法）
T70H78的博客
07-07 1516
以关闭弹框为例，在孙子弹框中同时关闭爷弹框与父弹框
vue 孙组件调爷爷组件的方法
Web_Notes的博客
08-30 1028
this.$parent.$parent.addFun()
爷孙组件，孙子组件调用爷爷组件的方法
weixin_47163986的博客
02-22 843
孙子组件调用爷爷组件的方法
vue的孙组件获取祖组件数据的方法
甜甜圆圆圈圈的博客
03-24 3267
项目中遇到一个问题，使用第三方插件的组件库会导致自己封装的组件库无法通过this.$parent.data获取父组件的数据（严格意义上讲这个父组件应该是祖级组件） 在无意尝试中发现使用在孙组件里使用this.$parent.$parent.data即可获取到祖级数据。 <template> <div id='detail'> <!-- 第三方框架封装的组件 ...
前端开发：组件之间的传值(父传子、子传父、兄弟组件之间传值)的使用
软贱开发攻城狮
09-22 2276
前言 在前端开发的时候，处理数据、传递数据是非常常用的操作方式，也是前端开发工作中非常重要的部分。尤其是在前端开发过程中的组件之间的数据传递，是必用操作。那么本篇博文就来分享一下在前端开发的时候，对于在使用组件的时候进行数据传递处理的操作使用。 首先来了解一下在前端Vue开发过程中常用的组件之间的传值场景，有三种：父组件传值到子组件、子组件传值到父组件、兄弟组件之间的传值。其他延伸的组件之间的传值场景：孙子组件传值给爷爷组件、祖父组件传值给曾孙组件等等隔代关系传值，这些跨三级以上的组件的传值延伸情景
Vue组件间通信方式都有哪些
haha_556的博客
08-27 186
父子通信 兄弟组件通信 祖孙与后代之间的通信 非关系组件之间的通信 组件间通信的方案 整理vue中8种常规的通信方案 1、通过props传递 2、通过$emit触发自定义事件 3、使用ref 4、EventBus 5、provide与inject 6、Vuex props 传递数据 适用场景：父组件传递数据给子组件 子组件设置props属性，定义接收父组件传递过来的参数 父组件在使用子组件标签中通过字面量来传递值 Children.vue props:{ name:{ type:String,.
vue中子组件向父组件传值（详细）
浮游的博客
06-18 441
子组件向父组件传值用$emit方法 子组件： <template> <div class="app"> <input @click="sendMsg" type="button" value="给父组件传递值"> </div> </template> <script> export default { data () { return { //将msg传递
vue经常使用的组件通信的方法
03-11
本文主要介绍了 Vue2 和 Vue3 中常用的组件通信方法，包括 Props、自定义事件、mitt 插件、v-model、$attrs、$refs、provide/inject、slot 等。" 在 Vue.js 中，组件通信是构建复杂应用的基础。以下是各种通信方式...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值