vue解决provide和inject响应的问题
官⽹上说provide 和 inject 绑定并不是可响应的。这是刻意为之的。然⽽，如果你传⼊了⼀个可监听的对象，那么其对象的属性还是可响应的。
provide：
Object | () => Object（⼀个对象或返回⼀个对象的函数）
inject：
Array | { [key: string]: string | Symbol | Object }（⼀个字符串数组，或⼀个对象，对象的 key 是本地的绑定名）
要实现⽗⼦组件响应，⽗组件传递的数据类型必须是对象Object，⼦组件接收的数据类型必须是对象Object，其他数据类型都是不好使的
provide和inject响应的例⼦：
⽗组件：
<template>
<div class="menu">
<label>⽗组件输⼊框：</label>
<input v-model="level.name" @change="levelChange(level.name)"/>
<!-- ⼦组件 -->
<my-list></my-list>
</div>
</template>
<script>
import MyList from '@/pages/user/children/MyList'
export default {
components:{MyList},
provide(){
return {
userLevel:this.level,
}
},
data(){
return{
level:{name:"初始化"},
}
},
methods:{
levelChange(val){
this.userLevel = this.level;
console.log(this.userLevel )//可以打印出对象属性name值改变了
}
}
}
</script>
⼦组件（MyList.vue）
<template>
<div class="my-list">
<p>⼦组件接收数据：{{userLevel.name}}</p>
<label>⽗组件输⼊框:</label><input type="text" v-model="userLevel.name">
</div>
</template>
<script>
export default {
// inject:['userLevel'],
inject:{
userLevel:{
default:()=>{}
},
},
data(){
return{
}
}
}
</script>
输出：
初始化：
修改⽗组件数据：输⼊框的值是"初始"，⼦组件也输出"初始
修改⼦组件数据：输⼊框的值是"⼦组件"，⽗组件输⼊框也显⽰"⼦组件"
好啦，provide和inject实现响应，⽗组件的数据修改影响了⼦组件的更新，⼦组件的数据修改同样影响了⽗组件的更新。
数据格式为对象Object的类型，⽗组件修改数据影响⼦组件，⼦组件修改数据影响⽗组件，感觉和对象的存储有关，对象格式数据存储的是指针⽽不是数据，所以⽗⼦组件其实是⽤的同⼀个对象，修改的也是同⼀个对象，因此会实现双向响应改变，不知道我这样理解的是由有问题。
补充知识：vue监听赋值值以及provide与inject
vue 当⽗组件改变⼦组件的props 却不变
watch: {
'oState': function (val,oldval) {
},
// 深度 watcher
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
},
$refs
<ul class="comment-list" v-if="list" ref="commentList"></ul>
scrollToTop () {
this.$refsmentList.scrollTop = 0
}
$el
this.$refs.studentListDialog.$el.querySelector('.el-dialog')
vm.$once( event, callback )
参数：
{string} event
{Function} callback
⽤法：
监听⼀个⾃定义事件，但是只触发⼀次，在第⼀次触发之后移除。
vm.$off( [event, callback] )
参数：
{string | Array<string>} event (只在 2.2.2+ ⽀持数组)
{Function} [callback]
⽤法：
移除⾃定义事件。
如果没有提供参数，则移除所有的事件；
如果只提供了事件，则移除该事件所有的；
如果同时提供了事件与回调，则只移除这个回调的。
vm.$destroy()
⽤法：
完全销毁⼀个实例。清理它与其它实例的连接，解绑它的全部指令及事件。触发 beforeDestroy 和 destroyed 的钩⼦。
当⽣成vue实例后，当再次给数据赋值时，有时候并不会⾃动更新到视图上去
obj:{
arr:[]
}
双向绑定后⽆法直接改变obj.arr
需要新增⼀个arr赋值或者
this.$set(this.ruleForm, 'date', time)
vue.set(target,key,value)
参数
{object | Array} target
{string | number} key
{any} value
react router 和vue routerthis.$set()和Vue.set()本质⽅法⼀样，前者可以⽤在methods中使⽤。
set⽅法调⽤时，可以触发页⾯全部重新渲染。
provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }
这对选项需要⼀起使⽤，以允许⼀个祖先组件向其所有⼦孙后代注⼊⼀个依赖，不论组件层次有多深，并在起上下游关系成⽴的时间⾥始终⽣效。如果你熟悉 React，这与 React 的上下⽂特性很相似。
provide 选项应该是⼀个对象或返回⼀个对象的函数。该对象包含可注⼊其⼦孙的属性。在该对象中你可以使⽤ ES2015 Symbols 作为 key，但是只在原⽣⽀持 Symbol 和 Reflect.ownKeys 的环境下可⼯作。
inject 选项应该是：
⼀个字符串数组，或
⼀个对象，对象的 key 是本地的绑定名，value 是：
在可⽤的注⼊内容中搜索⽤的 key (字符串或 Symbol)，或
⼀个对象，该对象的：
from 属性是在可⽤的注⼊内容中搜索⽤的 key (字符串或 Symbol)
default 属性是降级情况下使⽤的 value
提⽰：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然⽽，如果你传⼊了⼀个可监听的对象，那么其对象的属性还是可响应的。
⽰例：
// ⽗级组件提供 ‘foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// ⼦组件注⼊ 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
以上这篇vue 解决provide和inject响应的问题就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。