watch 监听父组件传过来的对象 深度监听
时间: 2023-11-24 16:47:03 浏览: 12
可以使用 `watch` 监听父组件传过来的对象,并且使用 `deep: true` 选项进行深度监听。示例代码如下:
```javascript
props: {
obj: {
type: Object,
required: true
}
},
watch: {
obj: {
handler(newVal, oldVal) {
// 处理逻辑
},
deep: true
}
}
```
相关问题
vue2监听父组件传过来的对象
在 Vue2 中,可以使用 `watch` 监听父组件传递的对象。具体步骤如下:
1. 在子组件中定义一个 props,用来接收父组件传递的对象:
```javascript
props: {
myObject: {
type: Object,
required: true
}
}
```
2. 在子组件中定义一个 `watch`,用来监听父组件传递的对象:
```javascript
watch: {
myObject: {
handler: function(newVal, oldVal) {
// 对象发生变化后的处理逻辑
},
deep: true
}
}
```
在 `watch` 中,`handler` 函数会在 `myObject` 对象发生变化时被调用,`newVal` 参数表示新的对象值,`oldVal` 参数表示旧的对象值。`deep: true` 表示深度监听对象的属性变化。
3. 在父组件中使用子组件,并传递一个对象作为 props:
```html
<template>
<div>
<my-component :my-object="myObject"></my-component>
</div>
</template>
<script>
export default {
data() {
return {
myObject: {
name: 'John',
age: 30
}
}
}
}
</script>
```
在父组件中,将对象 `myObject` 作为 props 传递给子组件 `my-component`。当 `myObject` 对象发生变化时,子组件中定义的 `watch` 就会被触发。
vue3.2中父传子中watch深度监听
Vue 3.2中,可以通过`watch`选项的`deep`属性来实现深度监听。`deep`属性为一个布尔值,表示是否开启深度监听。当`deep`属性为`true`时,Vue会递归遍历监听对象的所有子属性,当监听的对象或子属性发生变化时,`watch`函数就会被触发。
下面是一个示例:
```vue
<template>
<div>
<h2>父组件{{message}}</h2>
<Child :data="data" />
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child
},
data() {
return {
message: 'Hello Vue!',
data: {
name: 'Tom',
age: 20
}
};
},
watch: {
'data': {
deep: true,
handler(newVal, oldVal) {
console.log('父组件中data对象或子属性发生变化');
}
}
}
};
</script>
```
在上述示例中,父组件中的`data`对象有两个子属性`name`和`age`,在`watch`选项中开启了`deep`属性,当`data`对象或其子属性发生变化时,`handler`函数就会被触发。
需要注意的是,开启深度监听会带来一些性能问题,因为Vue需要递归遍历所有子属性。因此,建议在必要的情况下再开启深度监听。