在Vue 2.x中,使用inject
注入的值默认情况下是不能被watch
直接监控到的,因为inject
提供的值不是响应式的。这是Vue 2.x的设计,与Vue 3.x中的provide
和inject
不同,Vue 3.x中的inject
提供的值是响应式的,可以直接被watch
监控到。
如果你希望在Vue 2.x中监控inject
中的值的变化
使用计算属性或引用类型的响应式数据:将inject
提供的值保存在组件的响应式数据中,然后使用计算属性或watch
来监控这个响应式数据的变化。例如:
<template>
<div>
<p>{{ injectedValue }}</p>
</div>
</template>
<script>
export default {
inject: ['injectedValue'],
data() {
return {
// 将 injectedValue 存储在响应式数据中
valueToWatch: this.injectedValue,
};
},
watch: {
valueToWatch(newValue, oldValue) {
console.log('injectedValue 变化:', newValue, oldValue);
// 在这里可以执行相应的操作
},
},
};
</script>
示例二、
父组件:
<template>
<div @click="changeMap"></div>
</template>
<script>
export default {
provide() {
return {
mapLoad: this.mapLoad,
};
},
data(){
return {
isLoadMap: false
}
},
methods: {
mapLoad(){
return this.isLoadMap
},
changeMap(){
this.isLoadMap = !this.isLoadMap
}
},
};
</script>
inject使用的地方
<template>
<div>
</div>
</template>
<script>
export default {
inject: ['mapLoad'],
computed: {
watchloadmap() {
return this.mapLoad()
}
},
watch: {
watchloadmap(newValue, oldValue) {
console.log('injectedValue 变化:', newValue, oldValue);
// 在这里可以执行相应的操作
},
},
};
</script>
注意事项: