组件通信 Provide&&inject
在父组件中利用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的更多相关文章
- vue高级组件之provide / inject
转载:https://blog.csdn.net/Garrettzxd/article/details/81407199 在vue中不同组件通信方式如下 1.父子组件,通过prop 2.非父子组件,通 ...
- Vue.js最佳实践--给大量子孙组件传值(provide/inject)
开发中有个需求,有个Parent组件(例如div)下,输入框,下拉框,radiobutton等可编辑的子孙组件几百个,根据某个值统一控制Parent下面的所有控件的disabled状态 类似于这样,给 ...
- vue3 父组件给子组件传值 provide & inject
介绍 provide() 和 inject() 可以实现嵌套组件之间的数据传递. 这两个函数只能在 setup() 函数中使用. 父级组件中使用 provide() 函数向下传递数据. 子级组件中使用 ...
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- 组件的通信 ：provide / inject 对象进入后，就等于不用props，然后内部对象，直接复制可以接受数组，属性不能直接复制，可以用Object.assgin覆盖对象，或者Vue的set 双向绑定数据
组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...
- vue 组件传值$attrs $listeners $bus provide/inject $parent/$children
$attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v ...
- vue provide/inject 父组件如何给孙子组件传值
一般情况下我们父子组件之间的传值用的是props,这个就不多说了,但是如果想让父组件给子组件的组件传值怎么办呢,如果还用props的话肯能会比较复杂,这里我们就可以用到 provide 和 injec ...
- vue组件通讯之provide / inject
什么是 provide / inject [传送门] vue的组件通讯方式我们熟知的有 props $emit bus vuex ,另外就是 provide/inject provide/inject ...
- vue组件通信新姿势
在vue项目实际开发中我们经常会使用props和emit来进行子父组件的传值通信,父组件向子组件传递数据是通过prop传递的, 子组件传递数据给父组件是通过$emit触发事件来做到的.例如: Vue. ...
随机推荐
- 点云网格化算法---MPA
MPA网格化算法思路 第一步:初始化一个种子三角面.(随机选点,基于该点进行临近搜索到第二点:在基于该线段中点临近搜索到第三点) 图1 第二步:在种子三角面的基础上,进行面片的扩充,利用边的中点进行临 ...
- zabbix 内网监控云服务器
今天 搞监控碰到了一个问题就是.内网机器搭建的zabbix服务器去监控云服务器agent的时候,agent 需要写服务端的IP地址. 我的思路是内网服务器映射自己公网IP地址的zabbix的端口100 ...
- 使用foreach进行批量更新
public void addEmps(@Param("emps")List<Employee> emps); 2映射文件配置 <!-- 批量保存 --> ...
- Vue知识整理10：条件渲染（v-if v-show）
在Vue中使用v-if等条件实现条件的判断来实现对象的显示. 也可以采用 v-show条件来实现对象的显示.
- oracle-SYSTEM表空间的备份与恢复
oracle-SYSTEM表空间的备份与恢复 这一篇在介绍备份及恢复数据文件的方法时,以备份和重做日志(包括归档日志和在线日志)没有丢失为前提 所谓关键数据文件:system表空间的数据文件与参数un ...
- 判断Ctrl Shift Alt 键当前是否被按下
Control.ModifierKeys.HasFlag(Keys.Shift) 以此类推
- PostgreSQL索引思考
当在看Monetdb列存行只支持IMPRINTS和ORDERED这两种索引,且只支持定长数值类型时,就在思考,对于列存,还有必要建索引吗?在PostgreSQL的索引就要灵活很多,我对常用列建合理的索 ...
- 网站私有CA证书制作
所谓的网站安全证书 是通过在客户端浏览器和Web服务器之间建立一条SSL安全通道保证了双方传递信息的安全性,而且用户可以通过服务器证书验证他所访问的网站是否真实可靠. 大体步骤: ...
- 安装开发环境vs2017+sql2016+tfs2017
安装开发环境vs2017+sql2016+tfs2017 编写人:左丘文 2019-7-16 近一年了,一直没空着手写点什么,跟大家交待下吧,去年一次机会,其实也不完全是去年,因此离开了我工作15年的 ...
- [BZOJ 3509] [CodeChef] COUNTARI (FFT+分块)
[BZOJ 3509] [CodeChef] COUNTARI (FFT+分块) 题面 给出一个长度为n的数组,问有多少三元组\((i,j,k)\)满足\(i<j<k,a_j-a_i=a_ ...