通常,当我们需要从父组件向子组件传递数据时,我们使用 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. N63050 第十二周运维作业 ansible常用模块介绍未完成

    就业和全程班本周学习内容: 二十三.Mysql数据库四 1.MySQL主从复制实现和故障排错(50分钟) 2.MySQL级联复制和主主复制架构实现(51分钟) 3.MySQL的半同步复制和复制过滤器( ...

  2. C# 连接SQLSERVER数据库常用操作类

    //数据库连接字符串 public static string connectStr = @"server=.;database=test;uid=sa;pwd=123456;"; ...

  3. docker配置文件模板

    { "registry-mirrors": [ "https://bxsfpjcb.mirror.aliyuncs.com" ], "max-conc ...

  4. 肖sir_多线程Thread(threading)__知识点

    多线程Thread(threading) 一.理论知识 二.实战

  5. psgl

    /* Navicat Premium Data Transfer Source Server : postgreSQL Source Server Type : PostgreSQL Source S ...

  6. 使用JIMO ActionOne HongHu 及其他MR VR眼镜,将真实场景和游戏内场景混合渲染

    1. 在VR相机Head内创建一个 Camera 和两个RawImage(Camera 的参数和VRCamera的参数一致, 两个RawImage尺寸一致, 要把VRCamera的相机遮挡住 ) 2. ...

  7. 高校github课程资源汇总

    序号 学校名称 学校类型 课程资源链接 1 清华大学 Top 计算机系课程攻略 https://github.com/Salensoft/thu-cst-cracker https://github. ...

  8. jQuery-强大的jQuery选择器 (详解)

    jq除常用的选择写法之外的更多方法记录. 原文:jQuery-强大的jQuery选择器 (详解)[转] 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("di ...

  9. 071_salesforce 页面自动检索匹配显示设置

    通常我们会有需求:在搜索框中输入关键词,点击后面搜索,相关数据会显示在输入框的下面供选择,如下图 First I am assuming that you already have Static Re ...

  10. wendows 批量修改文件后缀(含递归下级)

    for /r %%a in (*.jpg)do ren "%%a" "%%~na.png" //-- or :for /r %a in (*.jpg)do re ...