Vue非父子組件(爺孫關係)通信Provide&&Inject
通常,当我们需要从父组件向子组件传递数据时,我们使用 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的更多相关文章
- Vue 非父子组件通信方案
Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- vue非父子组件间通信
有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的Vue实例作为中央事件总线: 有时候非父子关系的组件也需要通信.在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: var bu ...
- vue 非父子组件传值
/*非父子组件传值 1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例 2.在要广播的地方引入刚才定义的实例 3.通过 VueEmit.$emit('名称','数据') 4.在接收收 ...
- vue非父子组件间传参问题
最近在使用vue进行开发,遇到了组件之间传参的问题,此处主要是针对非父子组件之间的传参问题进行总结,方法如下:一.如果两个组件用友共同的父组件,即 FatherComponent.vue代码 < ...
- vue非父子关系之间通信传值
第一种方法: 通过给vue实例添加自定义属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- Vue非父子组件传值
<template> <div id="app"> <v-home></v-home> <br> <hr> ...
- Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 非父子组件之间的传值(Bus/总线/发布订阅模式/观察者模式)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue.js 源码分析(八) 基础篇 依赖注入 provide/inject组合详解
先来看看官网的介绍: 简单的说,当组件的引入层次过多,我们的子孙组件想要获取祖先组件的资源,那么怎么办呢,总不能一直取父级往上吧,而且这样代码结构容易混乱.这个就是这对选项要干的事情 provide和 ...
随机推荐
- JavaSE总结(2)
控制语句idea.方法重载控制语句1.顺序结构从上到下从左到右依次执行2.判断结构 a.if(判断表达式){ 语句体; } b.if(判断表达式){ 语句 ...
- 《用Python写网络爬虫》pdf高清版免费下载
<用Python写网络爬虫>pdf高清版免费下载地址: 提取码:clba 内容简介 · · · · · · 作为一种便捷地收集网上信息并从中抽取出可用信息的方式,网络爬虫技术变得越来越有 ...
- 拼多多anti-content核心算法完全解密+修复
今天偶然看到拼多多的ant-content好奇就搞了下. 解密方法和代码 代码是用ast来解密的.利用babel处理,解密一部分+手动修复代码. AST相关的教程和文档 https://steaken ...
- promethues【centos7】时间同步
Promethues和Grafana展示的监控突然消失了,服务器检查发现没什么异常. 当打开promethus网页后,发现有一个错误提示: Warning! Detected 60.44 second ...
- Vue基础 · 父子组件之间的交互(5)
1.父子组件交互 <body> <div id="app"> <!--子组件接收到"change"方法,绑定父组件的方法--> ...
- vue页面添加锚点后 点击不改变URL
html: <a @click="changeHash('#row')"> {{ $t("msg.desc1") }} </a> j ...
- VSCODE 界面设置
如上图所示: 用插件background-cover ,再设置下图片路径即可,程序员专属的开发DIY界面随手可得 当然添加账号来同步,以后设置一次即可随时同步
- 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中未 ...
- git常规操作
git拉代码 使用git clone命令从仓库下载代码,代码下载到了本地:git clone 链接 如果仓库代码又了更新,这时可以使用git pull命令将更新下载到本地 在对本地代码就行修改后,可以 ...
- vue实现全部防抖
// 全局注册防抖 Vue.component("ElButton").mixin({ data() { return { debounce: false ...