vue 中provide的用法_vue中provide和inject的用法

2.2.0 新增描述: provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中; 并且这对选项需要一起使用; 以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。//父组件:provide: { //provide 是一个对象,提供一个属性或方法 foo: '这是 foo', fooMethod:()=>{ console.log('父组件 fooMethod 被调用') }},// 子或者孙子组件inject: ['foo','fooMethod'], //数组或者对象,注入到子组件mounted() { this.fooMethod() console.log(this.foo)}//在父组件下面所有的子组件都可以利用inject复制代码

provide 和 inject 绑定并不是可响应的。这是官方刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的,对象是因为是引用类型//父组件:provide: { foo: '这是 foo'},mounted(){ this.foo='这是新的 foo'}// 子或者孙子组件inject: ['foo'], mounted() { console.log(this.foo) //子组件打印的还是'这是 foo'}复制代码

provide和inject响应方法// 父组件provide() { return { staticValue: this.staticValue, // 直接返回值，不可响应 staticObject: this.staticObject, // 返回一个对象，可响应 getReactiveValue: () => this.staticValue // 返回一个对象的函数，可响应 } }, // 子组件inject: ["staticValue", "getReactiveValue", "staticObject"],computed: { reactiveValue() { return this.getReactiveValue(); // 返回注入的对象函数，通过计算属性来监听值的变化 }, },复制代码

所以provide返回一个对象或者函数是可以响应的，因为对象和函数是引用类型，实际上改变也不是vue做的，而是JS的引用类型特性

微信交流(备注：前端)

vue 中provide的用法_vue中provide和inject的用法相关推荐

vue 中provide的用法_vue中provide和inject使用
1.provide/inject有什么用? 常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读 ...
vue 中provide的用法_Vue中使用provide和inject
相信大家在工作中一定遇到过多层嵌套组件,而vue 的组件数据通信方式又有很多种. 比如vuex.$parent与$children.prop.$emit与$on.$attrs与$lisenters.e ...
vue监听字符串长度_vue中的计算属性和侦听器
计算属性概念模板内的候通现端数是制这.效合应近环大过这业据的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护在重说道.础过学开概码数项遍间里哦行览屏屏 ...
在vue中实现picker样式_vue中van-picker的多列联动数据格式如何设置以及调用
一开始看到van-picker的多列联动的例子时,脑子是懵逼的,我即将要用的数据不可能这么简单啊,这叫我咋用! 然后一顿苦思冥想,再深读文档内极其稀少的信息,最后在多次尝试后,终于把结果试出来了.没错 ...
vue 中provide的用法_vue 中的 provide 和 inject 用法
provider/inject:简单来说就是在父组件 provide 中提供变量,子组件 inject 中来注入,然后可以在子组件内部使用 provide 的变量需要注意的是这里不论子组件有多深,只 ...
vue 中provide的用法_vue中的provide和inject
阅读element-ui源码,发现在设计子组时件用到了inject属性,随即查了一下官方文档,得知vue在2.2.0版本里新增了provide / inject: provide 和 inject 主 ...
中provide的用法_Vue中那些你不知道的作用域
作用域控制可以使用哪些变量以及在何处使用.它控制它们对应用程序的不同部分的"可见性".了解 Vue 提供的作用域级别之间的差异会帮助我们编写更清晰的代码. 下面是 vue 中4个级 ...
vue中this.init用法_Vue中的this.$options.data()和this.$data用法说明
问题项目里遇到一个问题,用this.$options.data()重置组件data时,data()里用this获取的props或method都为undefined,代码简化如下: export de ...
vue 中watch函数名_VUE中watch用法
一. watch是什么? 监测 Vue 实例变化的一个表达式或方法.回调函数得到的参数为新值和旧值,用一个函数取代. 简洁的说:watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法.可以 ...

vue 中provide的用法_vue中provide和inject的用法

vue 中provide的用法_vue中provide和inject的用法相关推荐

最新文章

热门文章