父组件传递对象到子组件的方法
时间: 2023-11-19 18:51:19 浏览: 30
父组件传递对象到子组件的方法有两种:
1. 通过 props 传递
在父组件中,将要传递的对象作为一个属性传递给子组件,子组件通过 props 接收该属性。
父组件:
```
<template>
<div>
<ChildComponent :objProp="myObj" />
</div>
</template>
<script>
export default {
data() {
return {
myObj: {
name: 'Tom',
age: 18
}
}
}
}
</script>
```
子组件:
```
<template>
<div>
<p>{{ objProp.name }}</p>
<p>{{ objProp.age }}</p>
</div>
</template>
<script>
export default {
props: {
objProp: Object
}
}
</script>
```
2. 通过 $emit 传递
在父组件中,将要传递的对象作为参数传递给子组件的方法,子组件通过 $emit 触发该方法并将对象作为参数传递回父组件。
父组件:
```
<template>
<div>
<ChildComponent @objEvent="handleObjEvent" />
</div>
</template>
<script>
export default {
methods: {
handleObjEvent(obj) {
console.log(obj)
}
}
}
</script>
```
子组件:
```
<template>
<div>
<button @click="handleClick">传递对象</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
const obj = {
name: 'Tom',
age: 18
}
this.$emit('objEvent', obj)
}
}
}
</script>
```
相关推荐
![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)