provide和inject使用场景也是组件传值,尤其是祖父组件--孙组件等有跨度的组件间传值,单向传值(由provide的组件传递给inject的组件)。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

inject 通常是一个字符串数组。

示例:

(1)祖父组件grandpaDom.vue:

<template>
<div>
<father-dom>
</father-dom>
</div>
</template>
<script>
import fatherDom from "./fatherDom.vue";
export default {
provide: {
fooNew:
"bar"
},

data() {
return {};
},
components: { fatherDom },
methods: {}
};
</script>

(2)父亲组件fatherDom.vue:

<template>
<div>
<child-dom></child-dom>
</div>
</template>
<script>
import childDom from "./childDom.vue";
export default {
name: "father-dom",
components: { childDom }
};
</script>

(3)孙组件childDom.vue

<template>
<div>
<p>fooNew:{{fooNew}}</p>
</div>
</template>
<script>
export default {
name: "childDom",
inject: ["fooNew"],
methods: {}
};
</script>

效果:

vue provide和inject使用的更多相关文章

  1. vue provide和inject 父组件和子孙通信

    父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量.不论子组件有多深,只要调用了inject那么就可以注入provider中的数据.而不是局限于只能从当前父组件的prop ...

  2. 【vue】中 provide 和 inject 的使用方法

    <div id="app"> hello <my-button> </my-button> </div> <script sr ...

  3. vue的provide和inject特性

    由来 组件之间的通信可以通过props和$emit的方式进行通信,但是如果组件之间的关系非常复杂的话,通过以上的方式会很麻烦,并且程序会非常脆弱,没有建中性可言. 在==vue2.2.0 中新增pro ...

  4. vue中的provide和inject

    vue中的provide和inject:https://blog.csdn.net/viewyu12345/article/details/83011618

  5. vue 3 学习笔记 (八)——provide 和 inject 用法及原理

    在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传 ...

  6. 051_末晨曦Vue技术_处理边界情况之provide和inject依赖注入

    provide和inject依赖注入 点击打开视频讲解更详细 在此之前,在我们描述访问父级组件实例的时候,展示过一个类似这样的例子: <google-map> <google-map ...

  7. vue provide/inject 父组件如何给孙子组件传值

    一般情况下我们父子组件之间的传值用的是props,这个就不多说了,但是如果想让父组件给子组件的组件传值怎么办呢,如果还用props的话肯能会比较复杂,这里我们就可以用到 provide 和 injec ...

  8. 介绍Provide以及Inject

    介绍 Vue 的 Provide 以及 Inject Provide 以及 Inject 是 Vue 中用于祖先元素向其所有后台元素注入依赖的接口. 具体用法 // Data.vue ... expo ...

  9. vue2.0与3.0中的provide和inject 用法

    1.provide/inject有什么用? 常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读 ...

随机推荐

  1. MyBatis接口的简单实现原理

    MyBatis接口的简单实现原理 用过MyBatis3的人可能会觉得为什么MyBatis的Mapper接口没有实现类,但是可以直接用? 那是因为MyBatis使用Java动态代理实现的接口. 这里仅仅 ...

  2. Moq的一些基本用法

    本篇体验Moq的一些基本用法.首先通过NuGet安装Moq.包括: 模拟方法的返回值 模拟方法后执行回调函数 模拟方法依次返回多个值 模拟第二次调用方法返回异常 直接返回被模拟方法的原始返回值 模拟泛 ...

  3. [转载] MATLAB快捷键

    原文地址,点此查看 一.常用对象操作 除了一般windows窗口的常用功能键外. 1.!dir 可以查看当前工作目录的文件. !dir& 可以在dos状态下查看. 2.who   可以查看当前 ...

  4. iOS开源控件库收集

    下拉刷新 将数据保存至keyRing 简单的模板引擎,用来生成html OmniGroup 这个其实不是类库,是一个Cocoa的Recipe CocoaPods 为XCode project提供一个类 ...

  5. Error launching remote program: No such file or directory

    iPhone真机调试报如下错误时,关掉Xcode,重新启动就可以了,注意是关掉Xcode,彻底关掉.Error launching remote program: No such file or di ...

  6. 解决TextView排版混乱或者自动换行的问题

    其实在TextView中遇到排版自动换行而导致混乱不堪的情况是非常常见的,而且导致这种问题产生的原因就是英文和中文混合输入,半角字符和全角字符混合在一起了.一般情况下,我们输入的数字.字母以及英文标点 ...

  7. 解决Fragment每次进入都加载的问题

    1.首先了解一下fragment的生命周期 onCreate是指创建该fragment类似于Activity.onCreate,你可以在其中初始化除了view之外的东西,onCreateView是创建 ...

  8. jQueryEasyUI创建菜单主页

    function addTab(title,path){ funcTab.tabs('add',{ title: title, fit:true, href:'${ctx}/login/forword ...

  9. vijos p1729 Knights

    描述 在一个N*N的正方形棋盘上,放置了一些骑士.我们将棋盘的行用1开始的N个自然数标记,将列用'A'开始的N个大写英文字母标记.举个例子来说,一个标准的8*8的国际象棋棋盘的行标记为1..8,列标记 ...

  10. 【BZOJ】【4052】【CERC2013】Magical GCD

    DP/GCD 然而蒟蒻并不会做…… Orz @lct1999神犇 首先我们肯定是要枚举下端点的……嗯就枚举右端点吧…… 那么对于不同的GCD,对应的左端点最多有log(a[i])个:因为每次gcd缩小 ...