<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. A1009. Product of Polynomials

    This time, you are supposed to find A*B where A and B are two polynomials. Input Specification: Each ...

  2. (转)轻松学,Java 中的代理模式及动态代理

    背景:讲到反射机制,肯定会想到动态代理. 轻松学,Java 中的代理模式及动态代理 代理模式可以在不修改被代理对象的基础上,通过扩展代理类,进行一些功能的附加与增强.值得注意的是,代理类和被代理类应该 ...

  3. codeblocks: 使用动态链接库(pcre)的配置

    说明:在c/c++程序中使用动态链接库, 编译后需要相关的dll文件(如:libpcre-1.dll,libpcreposix-0.dll)才能正常的运行. 2014-06-27

  4. Day7--Python--基础数据类型补充,集合,深浅拷贝

    一.基础数据类型补充 1.join() 把列表中的每一项(必须是字符串)用字符串拼接 与split()相反 lst = ["汪峰", "吴君如", " ...

  5. TODO 动态执行appium代码,便于修改和调试

    https://testerhome.com/topics/9040 还没尝试过. 不过不是很懂怎么实现的,java不是编译后再运行的语言吗?怎么一边编译一边运行呢???

  6. No cached version of cn.lightsky.infiniteindicator:library:1.2.2 available for offline mode.

    去掉勾勾

  7. 如何在springcloud分布式系统中实现分布式锁?

    一.简介 一般来说,对数据进行加锁时,程序先通过acquire获取锁来对数据进行排他访问,然后对数据进行一些列的操作,最后需要释放锁.Redis 本身用 watch命令进行了加锁,这个锁是乐观锁.使用 ...

  8. AtomicInteger类的理解与使用

    AtomicInteger类的理解与使用 首先看两段代码,一段是Integer的,一段是AtomicInteger的,为以下: public class Sample1 { private stati ...

  9. 持续集成CI

    一.CI 和 CD 持续集成是什么? 持续集成(Continuous integration,简称CI)指的是,频繁地(一天多次)将代码集成到主干.让产品可以快速迭代,同时还能保持高质量. 持续交付( ...

  10. 【.net】在ASP.NET中,IE与Firefox下载文件名中带中文汉字的文件,文件名乱码的问题

    #问题:客户端为ie或Firefox,服务端为asp.net时,下载文件名中包含中文汉字时,下载下来的文件的文件名是乱码: #解决方案: 示例代码:下载名称中带汉字的文件: public void P ...