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

child:

<template>
<div>
<p>{{message}}</p> </div>
</template> <script>
export default {
name: "childThree",
inject: ['for'],
data(){
return {
message:this.for,
}
}
}
</script>
parents:
<template>
<div>
<p>this is parent compoent!</p>
<child-two></child-two>
</div>
</template> <script>
import childTwo from '../components/childThree'
export default {
name: "parentTwo",
provide:{
for:'test'
},
components:{
childTwo
}
}
</script> <style scoped> </style>

vue provide和inject 父组件和子孙通信的更多相关文章

  1. vue之provide和inject跨组件传递属性值失败(父组件向子组件传值的两种方式)

    简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...

  2. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  3. vue 如何重绘父组件,当子组件的宽度变化时候

    vue 如何重绘父组件,当子组件的宽度变化时候 vue & dynamic el-popover position demo https://codepen.io/xgqfrms/pen/wv ...

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

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

  5. vue provide和inject使用

    provide和inject使用场景也是组件传值,尤其是祖父组件--孙组件等有跨度的组件间传值,单向传值(由provide的组件传递给inject的组件). provide 选项应该是一个对象或返回一 ...

  6. vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容

    父组件中的点击跳转: <ul class="insurance-entry clearfloat"> <li v-link="{name:'produc ...

  7. Vue : props 使用细节(父组件传递数据给子组件)

    props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...

  8. 简单记录一下vue生命周期及 父组件和子组件生命周期钩子执行顺序

    首先,vue生命周期可以用下图来简单理解 当然这也是官方文档的图片,详细的vue周期详解请参考这里 然而当同时存在父子组件的时候生命周期钩子是如何执行的呢? 请看下文: 加载渲染过程父beforeCr ...

  9. vue 使用props 实现父组件向子组件传数据

    刚自学vue不久遇到很多问题,刚好用到的分组件,所以就用到传递数据 弄了好久终于搞定了,不多说直接上代码 父组件: <template> <headers :inputName=&q ...

随机推荐

  1. 使用LFSR搭建误差补偿系统

    使用LFSR搭建误差补偿系统 首先弄明白什么是LFSR 线性反馈移位寄存器(LFSR)是内测试电路中最基本的标准模块结构,既用作伪随机测试码产生器,也作为压缩测试结果数据的特征分析器. 一个n阶的LF ...

  2. C++标准模板类库(STL)之queue初步

    1,STL里有些什么? 包括三个内容:容器.迭代器.算法. 2,容器有哪些? 有stack, vector, queue, deque, list, set, multiset, map, multi ...

  3. Elasticsearch-6.7.0系列(四)Metricbeat仪表盘。本身无端口,依赖kibana

    前提 centos7环境 https://www.cnblogs.com/zhuwenjoyce/p/10629320.html         elasticsearch搜索引擎 https://w ...

  4. 按固定元素数目分割数组- perl,python

    要求:把40个元素的数组,按每行8个,分5行打印出来.如下图 1 2 3 4 5 6 7 89 10 11 12 13 14 15 1617 18 19 20 21 22 23 2425 26 27 ...

  5. 使用Navicat连接阿里云mysql报错10061

    1.添加一个远程访问账号admin mysql> use mysql; mysql> GRANT ALL ON *.* TO 账户@'%' IDENTIFIED BY '密码' WITH ...

  6. 画流程图挺好的软件---visio

    visio 2016 下载地址链接: https://pan.baidu.com/s/1oyfJL_QgOA7qUHOt7p8CIA 提取码: mv79 第一次做的样式图:

  7. 深度学习(一)——CNN算法流程

    深度学习(一)——CNN(卷积神经网络)算法流程 参考:http://dataunion.org/11692.html 0 引言 20世纪60年代,Hubel和Wiesel在研究猫脑皮层中用于局部敏感 ...

  8. 关于mysql文件导入提示“Variable @OLD_CHARACTER_SET_CLIENT can't be set to the value of @@CHARACTER_SET_CLIENT”问题分析

    今天用myssqldump导出数据,然后再导入另外mysql数据库时,提示Variable @OLD_CHARACTER_SET_CLIENT can't be set to the value of ...

  9. Could not initialize class utils.JdbcUtils

    今天用JdbcUtils时出现了一个问题,被困扰了一晚上.从网上找的原因,说什么url错了,版本不一致等等都不能解决我的问题, 我写好了一个JdbcUtils准备测试,发现从后台用Dao测试完全没问题 ...

  10. spring框架篇(一)-------spring简介与配置文件使用控制反转事例

    spring简介 Spring 是一个开源框架,中文意思就是春天,也许是作者想让自己的这个框架给Java开发人员带来春天吧.其官方网站是 https://spring.io/ ,可以在官方网站下载到完 ...