通常,当我们需要从父组件向子组件传递数据时,我们使用 props。想象一下这样的结构:有一些深度嵌套的组件,而深层的子组件只需要父组件的部分内容。在这种情况下,如果仍然将 prop 沿着组件链逐级传递下去,可能会很麻烦。

Vue中提供解決類似方法,有效解決組件嵌套過多父組件給子組件傳參問題

父組件||爺組件

    provide: {
title: '非父組件傳參',
name: 'liao_shuang',
age: 18,
},

子組件||子孫組件

 inject: ['title','name','age'],

這樣就實現了類似場景!

要访问组件实例 property,我们需要将 provide 转换为返回对象的函数:

  provide() {
return {
title: '非父組件傳參',
name: 'liao_shuang',
age: 18,
test_length: this.name.length,
};
},

這樣就可以正常使用啦!

Vue非父子組件(爺孫關係)通信Provide&&Inject的更多相关文章

  1. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  2. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  3. vue非父子组件间通信

    有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...

  4. vue 非父子组件传值

    /*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...

  5. vue非父子组件间传参问题

    最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...

  6. vue非父子关系之间通信传值

    第一种方法: 通过给vue实例添加自定义属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  7. Vue非父子组件传值

    <template> <div id="app"> <v-home></v-home> <br> <hr> ...

  8. Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue 非父子组件之间的传值(Bus/总线/发布订阅模式/观察者模式)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解

    先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...

随机推荐

  1. JavaSE总结(2)

    控制语句idea.方法重载控制语句1.顺序结构从上到下从左到右依次执行2.判断结构    a.if(判断表达式){        语句体;    }    b.if(判断表达式){        语句 ...

  2. 《用Python写网络爬虫》pdf高清版免费下载

    <用Python写网络爬虫>pdf高清版免费下载地址: 提取码:clba 内容简介  · · · · · · 作为一种便捷地收集网上信息并从中抽取出可用信息的方式,网络爬虫技术变得越来越有 ...

  3. 拼多多anti-content核心算法完全解密+修复

    今天偶然看到拼多多的ant-content好奇就搞了下. 解密方法和代码 代码是用ast来解密的.利用babel处理,解密一部分+手动修复代码. AST相关的教程和文档 https://steaken ...

  4. promethues【centos7】时间同步

    Promethues和Grafana展示的监控突然消失了,服务器检查发现没什么异常. 当打开promethus网页后,发现有一个错误提示: Warning! Detected 60.44 second ...

  5. Vue基础 · 父子组件之间的交互(5)

    1.父子组件交互 <body> <div id="app"> <!--子组件接收到"change"方法,绑定父组件的方法--> ...

  6. vue页面添加锚点后 点击不改变URL

    html: <a @click="changeHash('#row')"> {{ $t("msg.desc1") }} </a>   j ...

  7. VSCODE 界面设置

    如上图所示: 用插件background-cover ,再设置下图片路径即可,程序员专属的开发DIY界面随手可得 当然添加账号来同步,以后设置一次即可随时同步

  8. Property or method "scope" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components

    报错如下 属性或方法"范围"不是在实例上定义的,而是在呈现期间引用的. 通过初始化属性,确保此属性是反应性的,无论是在数据选项中,还是对于基于类的组件. 原因在template中未 ...

  9. git常规操作

    git拉代码 使用git clone命令从仓库下载代码,代码下载到了本地:git clone 链接 如果仓库代码又了更新,这时可以使用git pull命令将更新下载到本地 在对本地代码就行修改后,可以 ...

  10. vue实现全部防抖

    // 全局注册防抖 Vue.component("ElButton").mixin({   data() {     return {       debounce: false ...