<div id="app">
hello
<my-button>
</my-button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script> <script>
let vm = new Vue({
provide: {
msg: '100'
},
el: '#app',
components: {
'MyButton': {
inject: ['msg'],
template: `<div>{{msg}}</div>`,
}
}
})
</script>

provide 是在父组件中定义,然后所有子组件都是可以通过 inject 注入该变量进行操作

【vue】中 provide 和 inject 的使用方法的更多相关文章

  1. 聊聊 Vue 中 provide/inject 的应用

    众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...

  2. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  3. vue中push()和splice()的使用方法

    vue中push()和splice()的使用方法 push()使用 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度.注意:1. 新元素将添加在数组的末尾. 2.此方法改变数组的长度 ...

  4. Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)

    Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...

  5. vue的provide和inject特性

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

  6. 用Vue中遇到的问题和处理方法(一)

    用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...

  7. 用Vue中遇到的问题和处理方法

    用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...

  8. vue中如何引入全局样式或方法

    vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...

  9. vue中常见的问题以及解决方法

    有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访 ...

随机推荐

  1. 关于TSql

    1.Sql:结构化查询语言(Structrued  Query  Language) 2.TSql:是Sql语言的另一种版本,且只能在SqlServer中使用.和Sql不同的是,TSql中增加了对变量 ...

  2. interface 界面&接口

    接口:接口(硬件类接口)是指同一计算机不同功能层之间的通信规则称为接口.接口(软件类接口)是指对协定进行定义的引用类型. 界面:窗口,显示 英文解释都是interface partly from ba ...

  3. 第二十节,使用RNN网络拟合回声信号序列

    这一节使用TensorFlow中的函数搭建一个简单的RNN网络,使用一串随机的模拟数据作为原始信号,让RNN网络来拟合其对应的回声信号. 样本数据为一串随机的由0,1组成的数字,将其当成发射出去的一串 ...

  4. Luogu P3157 [CQOI2011]动态逆序对

    题目链接 \(Click\) \(Here\) 这个题有点卡常数..我的常数比较大所以是吸着氧气跑过去的... 题意:计算对于序列中每个位置\(p\),\([1,p-1]\)区间内比它大的数的个数,和 ...

  5. (字符串 枚举)The Hardest Problem Ever hdu1048

    The Hardest Problem Ever 链接:http://acm.hdu.edu.cn/showproblem.php?pid=1048 Time Limit: 2000/1000 MS ...

  6. 关键字(6):trigger触发器

    trigger是个特殊的存储过程,它的执行不是由程序调用,也不是手工启动,而是由事件来触发,比如当对一个表进行操作(insert,delete,update)时就会激活它执行.触发器经常用于加强数据的 ...

  7. 基础教程:Mac 电脑小白应该了解哪些东西?

    文章素材来源:知乎 文章收录于:风云社区(www.scoee.com),提供1700多款mac软件下载. 本文提供给那些从 PC 阵营初入 Mac 的同学而准备的,我们希望从硬件和软件.设计风格和使用 ...

  8. 5款Mac极速下载工具推荐和下载

    最近几年用到下载工具的情况其实很少了,比如几年前我们可能经常用下载工具下载视频.音乐.图书等资源,但今天的我们更多的在线看视频.在线听音乐了,偶尔用到下载的时候直接用浏览器自带的下载工具也完全够用了, ...

  9. MyBatis-parameterType 取出入参值

    SQL 映射文件的几种入参情况 一.单个基本类型参数 public MyUser selectMyUser(Integer id); <!-- #{参数名或任意名}:取出参数值 --> & ...

  10. Linux命令(十三)make_makefile基础

    1. 好处 一次编写,终身受益 2. 命名规则 makefile Makefile 3. 三要素 目标 依赖 规则命令 4. 第一版makefile 目标:依赖 tab键 规则命令 makefile: ...