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怎么更换自定义水印(Vue之全局水印的实现示例)
- vue pdf预览插件(Vue-pdf实现在线预览PDF文件)
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- vue十大基础知识(vue实战中的一些实用小魔法汇总)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
- vue 路由的两种模式(Vue3使用路由VueRouter4的简单示例)
- vue各种模块(一篇文章学会Vue中间件管道)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- vueclass和style绑定(Vue中Class和Style实现v-bind绑定的几种用法)
- vue点击导航进行内容切换(vue实现顶部左右滑动导航)
- google 调试vue(Vue实现Google第三方登录的示例代码)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vue 为什么使用虚拟dom(Vue虚拟Dom到真实Dom的转换)
- vue滑动切换页面(vue实现点击翻转效果)
- 官宣 全椒籍明星许海峰 奚秀兰 方芳 王璐瑶携手回家 走太平(全椒籍明星许海峰)
- 以前全椒人是怎么过冬的 满满都是回忆(以前全椒人是怎么过冬的)
- NVIDIA显卡份额冲上88 A饭发愁 游戏优化恐没A卡份了(NVIDIA显卡份额冲上88A饭发愁)
- AMD YES A卡还是N卡 A卡和N卡的区别(AMDYESA卡还是N卡)
- 以后显卡多了一个新选择,N卡和A卡外又多了个I卡(以后显卡多了一个新选择)
- 读卖乐园的彩灯(读卖乐园的彩灯)
热门推荐
- dedecms安全补丁(防止Dedecms入侵、漏洞问题的4点安全防范建议)
- php收集多个统计数据(PHP实现统计代码行数小工具)
- apache有几个配置文件linux系统(linux下使用Apache搭建文件服务器的步骤)
- dede栏目标签怎么调用(dedecms调用当前文档中TAG标签利于内页优化提高收录量)
- php命名空间真的存在吗(PHP中命名空间的使用例子)
- linux如何安装php7.1.5环境(vmware linux系统安装最新的php7图解)
- python有哪几种赋值(关于python多重赋值的小问题)
- vue项目步骤(Vue项目中常用的实用技巧汇总)
- linux连接工具命令行长度设置(linux userdel 命令的使用)
- laravel前后端分离模块化(laravel 实现划分admin和home 模块分组)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9