vue2.0自定义指令(vue2实现provide inject传递响应式)
类别:编程学习 浏览量:1828
时间:2022-03-28 12:57:52 vue2.0自定义指令
vue2实现provide inject传递响应式1. vue2 中的常规写法// 父级组件提供 'foo' var Provider = { data(){ return { foo: 'bar' } } provide: { fooProvide: this.fooFn // 传递一个引用类型函数过去 }, methods:{ fooFn() { return this.foo } } } var Child = { inject: ['fooProvide'], computed:{ fooComputed(){ return this.fooProvide() // 因为传递过来是个引用类型的函数 } } created () { console.log(this.fooComputed) } // ... }
// 父级组件提供 'foo' var Provider = { data(){ return { foo: 'bar', other:'...' } } provide: { app: this// 传递整个this过去 }, mounted(){ const that = this setTimeout(()=>{ that.foo = '改变值' },4000) } } var Child = { inject: ['app'], created () { console.log(this.app.foo) // this.app 下面都是响应式的,因为都是同一实例下的引用 } // ... }
Provide 方式:
1. @Provide() foo = 'foo'
2. @Provide('bar') baz = 'bar'
Inject 方式:
1. @Inject() foo: string
2. @Inject('bar') bar: string
3. @Inject(s) baz: string
示例:
// 父级组件提供 'fooProvide' @Provide('fooProvide') // 随意起名,传递跟接收一样就行.但一般保持跟下面变量一样 fooProvide = this.refreshNumFn // 变量接收一下要传递的值 refreshNumFn() { return this.refreshNum } // 子组件接收 @Inject('fooProvide') fooProvide: any get valueA(): any { return this.fooProvide() } mounted(){ console.log(this.valueA) // ... }
到此这篇关于vue2实现provide inject传递响应式 的文章就介绍到这了,更多相关vue2 provide inject 内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue如何在tab标签页循环加定时器(vue实现tab标签标签超出自动滚动)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue滚动条滚动事件(vue实现一个滚动条样式)
- vue组件keep-alive的原理是什么(如何理解Vue简单状态管理之store模式)
- vue pdf预览插件(Vue-pdf实现在线预览PDF文件)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- vue 组件布局(Vue实现固定底部组件的示例)
- vue项目打包上线的方法(vue项目打包以及优化的实现步骤)
- vue和springboot实战项目(vue+spring boot实现校验码功能)
- vue 动态绑定指令(vue动态绑定图标的完整步骤)
- 面试问vue掌握程度如何回答(面试最常问的13种Vue修饰符)
- 数组循环遍历展示vue(Vue中foreach数组与js中遍历数组的写法说明)
- vue过滤器使用思路(vue 过滤器和自定义指令的使用)
- vueelementui三级菜单(vue+element ui实现锚点定位)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vue实现一个炫酷的日历组件(vue利用Moment插件格式化时间的实例代码)
- 高中数学题(高中数学题型总结及解题方法)
- 冰岛旅游攻略(冰岛旅游攻略及花费)
- 为什么现在年轻人越来越喜欢买衣服(为什么现在年轻人越来越喜欢买衣服穿)
- 怎么做好SEO(怎么做好seo内容优化)
- 冬季钓鱼子线用 长 还是 短(冬季钓鱼子线用)
- 鱼竿 夏钓短,冬钓长 ,一定是这样 认清优缺点在选竿(鱼竿夏钓短冬钓长)
热门推荐
- html转ppt(HTML里显示pdf、word、xls、ppt的方法示例)
- js中Attribute和Property区别
- python机器人开发(python程序控制NAO机器人行走)
- 小程序ui设计样式(AmazeUI 平滑滚动效果的示例代码)
- 最全面的mysql索引详解(MySQL 全文索引使用指南)
- dedecms用法(将百度编辑器Ueditor整合到dedecms中的方法)
- 腾讯云服务器安装方法(在腾讯云服务器上部署网站镜像的详细教程)
- docker最新服务条款(解决Mac Docker x509证书的问题)
- 怎么用css设计边框(单元素利用css实现多重边框效果示例代码)
- vsftpd服务器的安装与配置(编译安装 vsFTP 3.0.3的详细解析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9