vue props 监听变化
时间: 2023-08-27 19:17:16 浏览: 73
在Vue中,可以使用`watch`选项来监听props的变化。根据引用,当需要监听基本类型的props变化时,可以直接在`watch`对象中定义一个与props同名的方法,然后在方法中执行相应的操作。例如,如果要监听一个名为`msg`的基本类型props的变化,可以这样定义:
```javascript
watch: {
msg(newVal, oldVal) {
// 执行相应的操作
console.log(newVal, oldVal);
}
}
```
当需要监听引用类型的props变化时,可以使用计算属性来获取引用类型的内部字段,然后再使用`watch`来监听该字段的变化。根据引用的示例,如果要监听一个名为`config`的引用类型props中的`role.isShow`字段的变化,可以这样定义:
```javascript
computed: {
isShow() {
return this.config.role.isShow;
}
},
watch: {
isShow(newVal, oldVal) {
// 执行相应的操作
console.log(newVal, oldVal);
}
}
```
如果需要深度监听对象或数组的变化,可以在`watch`对象中设置`deep: true`选项。根据引用的示例,如果要深度监听一个名为`config`的引用类型props的变化,可以这样定义:
```javascript
watch: {
config: {
handler(newVal, oldVal) {
// 执行相应的操作
console.log(newVal, oldVal);
},
deep: true
}
}
```
此外,根据引用和引用的示例,在子组件中监听传入的数据时,可以通过箭头函数和props来实现。例如,如果要监听一个名为`testStr`的基本类型props的变化,可以这样定义:
```javascript
watch: {
() => props.testStr,
(newVal, oldVal) => {
// 执行相应的操作
console.log('监听基本类型数据testStr');
console.log('new', newVal);
console.log('old', oldVal);
}
}
```
如果要监听一个名为`dataList`的引用类型props的变化,可以这样定义:
```javascript
watch: {
() => props.dataList,
(newVal, oldVal) => {
// 执行相应的操作
console.log('监听引用类型数据dataList');
console.log('new', newVal);
console.log('old', oldVal);
}
}
```<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue 中 props监听变化的几种方式](https://blog.csdn.net/a1056244734/article/details/122714811)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue3使用watch监听props中的数据](https://blog.csdn.net/qq_26707497/article/details/131460109)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]