在父组件中利用Provide 注入数据，在所有的子组件都可以拿到这个数据 可以在vue 中用来刷新页面

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Provide&&Inject通信</title>

    <script src="./node_modules/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <my-button>

            <my></my>

        </my-button>

    </div>

</body>

<script>

    Vue.component('my-button',{

     template:`<div><slot></slot></div>`,

     //在父组件注入数据

     provide:{

         msg:'hello'

     }

   })

   //所有的子组件都可以拿到数据

   Vue.component('my',{

     template:`<div>{{msg}}</div>`,

     inject:['msg']

   })

   let  vm = new Vue({

         el:'#app'

   })

   //hello

</script>

</html>

输出：

组件通信 Provide&&inject的更多相关文章

  1. vue高级组件之provide / inject

    转载:https://blog.csdn.net/Garrettzxd/article/details/81407199 在vue中不同组件通信方式如下 1.父子组件,通过prop 2.非父子组件,通 ...

  2. Vue.js最佳实践--给大量子孙组件传值(provide/inject)

    开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...

  3. vue3 父组件给子组件传值 provide & inject

    介绍 provide() 和 inject() 可以实现嵌套组件之间的数据传递. 这两个函数只能在 setup() 函数中使用. 父级组件中使用 provide() 函数向下传递数据. 子级组件中使用 ...

  4. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  5. 组件的通信 ：provide / inject 对象进入后，就等于不用props，然后内部对象，直接复制可以接受数组，属性不能直接复制，可以用Object.assgin覆盖对象，或者Vue的set 双向绑定数据

    组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...

  6. vue 组件传值$attrs $listeners $bus provide/inject $parent/$children

    $attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v ...

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

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

  8. vue组件通讯之provide / inject

    什么是 provide / inject [传送门] vue的组件通讯方式我们熟知的有 props $emit bus vuex ,另外就是 provide/inject provide/inject ...

  9. vue组件通信新姿势

    在vue项目实际开发中我们经常会使用props和emit来进行子父组件的传值通信,父组件向子组件传递数据是通过prop传递的, 子组件传递数据给父组件是通过$emit触发事件来做到的.例如: Vue. ...

随机推荐

  1. leetcode-mid-sorting and searching -347. Top K Frequent Elements

    mycode   71.43% class Solution(object): def topKFrequent(self, nums, k): """ :type nu ...

  2. Spring 缓存切面

    缓存切面:[通知+目标方法调用] 缓存操作执行过程: 1)如果是同步调用[sync=true],则首先尝试从缓存中读取数据,读取到则直接返回: 否则执行目标方法,将结果缓存后返回. 2)如果不是同步调 ...

  3. 阶段3 1.Mybatis_01.Mybatis课程介绍及环境搭建_05.mybatis环境搭建-前期准备

    视频中右侧没有勾选 直接finish 用下面的sql里面的一些表来实现今天的功能 只需要用到里面的user表. 这是之前已经建好的数据库 把表都删除掉,用sql语句去创建表和表内的记录,最终的结果: ...

  4. django 的多对多关系

    django里自带的多对多表创建 其实就是两个多对一关系各自关联,在第三张表上 多对多的增加 add()可以传数值 例如 add(1)或数组 add(*[2,3]) 多对多反向操作 自己创建第三张表, ...

  5. 【查阅】mysql配置文件/参数文件重要参数笔录（my.cnf）

    持续更新,积累自己对参数的理解 [1]my.cnf参数 [client]port = 3306socket = /mysql/data/3306/mysql.sockdefault-character ...

  6. [2019徐州网络赛J题]Random Access Iterator

    题目链接 大致题意:从根节点出发,在节点x有son[x]次等概率进入儿子节点,求到达最深深度的概率.son[x]为x节点的儿子节点个数. 又又又又没做出来,心态崩了. 下来看了官方题解后发觉自己大体思 ...

  7. 嵌入式软件工程师C语言经典笔试2

    1. 使用宏定义swap函数,不使用中间变量 #define swap(x,y) {(x) = (x) + (y);(y) = (x) - (y);(x) = (x) - (y)} 2. 实现字符串的 ...

  8. 梯度下降算法(Gradient descent)GD

    1.我们之前已经定义了代价函数J,可以将代价函数J最小化的方法,梯度下降是最常用的算法,它不仅仅用在线性回归上,还被应用在机器学习的众多领域中,在后续的课程中,我们将使用梯度下降算法最小化其他函数,而 ...

  9. selectTree 改造

    需求 把select改为selectTree,后台给的数据也进行了改造,数据里面多了children字段,包裹子集 代码 //import import { Row , Col , Select , ...

  10. java 技术分享

    http://www.ccblog.cn/99.htm http://www.ccblog.cn/100.htm http://www.ccblog.cn/101.htm http://www.ccb ...