vue2 怎么监听inject数据变化
时间: 2024-03-26 10:40:35 浏览: 85
2023前端最新Vue2面试题(高频17问).docx
在Vue2中,如果你想监听`inject`的数据变化,可以使用`watch`来进行监听。在组件中,创建一个计算属性来访问`inject`的数据,然后对这个计算属性进行`watch`监听即可。下面是示例代码:
```javascript
// 父组件
const parentComponent = {
provide: {
message: 'Hello, World!'
},
// ...
}
// 子组件
const childComponent = {
inject: ['message'],
computed: {
injectedMessage() {
return this.message
}
},
watch: {
injectedMessage(newValue, oldValue) {
console.log(`Inject data changed: ${oldValue} -> ${newValue}`)
}
},
// ...
}
```
在上述示例代码中,我们在父组件中提供了一个名为`message`的数据,然后在子组件中使用`inject`将这个数据注入到子组件中,并创建了一个计算属性`injectedMessage`来访问这个数据。然后我们对这个计算属性进行了`watch`监听,当`message`的值发生变化时,会触发`watch`中的回调函数,从而实现了对`inject`数据的监听。
阅读全文