<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. C# Winfrom 发送邮件验证码&Timer控件

    邮件发送: //定义一个全局的string类型的验证码: string yzm = ""; //定义一个字符串,这里面包含所有需要的验证码的元素: string a = " ...

  2. 洛谷P2336 喵星球上的点名

    解:SAM + 线段树合并 + DFS序. 姓和名之间插入特殊字符,转化为下题: 给定串集合S,T,问S中每个串包含了T中的几个串?T中每个串被多少个S中的串包含? 解:对S建广义SAM,并线段树合并 ...

  3. pandas 读取excel文件对数据简单清洗并用matplotlib 将数据展示

    首先我们看下数据 接下来数据分析操作 import numpy as np import pandas as pd from matplotlib import pyplot as plt if __ ...

  4. 第二十七篇-新建Activity

    新建Activity实现页面之间的跳转与传值. layout1.xml <?xml version="1.0" encoding="utf-8"?> ...

  5. IntelliJ IDEA Cannot resolve symbol ''

    study from : https://www.cnblogs.com/linmengfei/p/7909196.html File->Invalidate Caches 点击File | I ...

  6. tp5的include 标签 不能用了么

    直接调用页头页尾 直接原样显示了 正解: 要注意 file后不能加空格, 不然放在 页头会报错, 放在其他地方则不会被解析. 以上是我的经历,供参考. {include file ='public/h ...

  7. HomeFragment 嵌套关系

    1.HomeFragment 在mainActivty 中调用: 2.HomeFragment 中: private ArrayList<Fragment> mFragments = ne ...

  8. JS学习笔记Day6

    一.数组 1.数组就是个容器,里面可以存放任意类型的数 2.定义数组:1)var arr = []: 2)var arr = new Array():构造函数定义方式,如果括号中有一个整数,该正数代表 ...

  9. CentOS7 yum 安装 PHP 5.6.24

    配置yum源 追加CentOS 6.5的epel及remi源. # rpm -Uvh http://ftp.iij.ad.jp/pub/linux/fedora/epel/6/x86_64/epel- ...

  10. (map,c_str())水果 hdu1263

    水果 http://acm.hdu.edu.cn/showproblem.php?pid=1263 Time Limit: 2000/1000 MS (Java/Others)    Memory L ...