vue2监听父组件传过来的对象
时间: 2023-09-17 14:10:24 浏览: 39
在 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` 就会被触发。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)