vue 组件传参 object
时间: 2023-11-11 16:07:55 浏览: 39
Vue 组件传递对象参数的方式有多种,以下是其中几种常用的方式:
1. 父组件通过 props 传递对象参数给子组件
父组件中:
```html
<template>
<child-component :obj="obj"></child-component>
</template>
<script>
export default {
data() {
return {
obj: {
name: 'Vue',
version: '3.0.0'
}
}
}
}
</script>
```
子组件中:
```html
<template>
<div>{{ obj.name }}</div>
</template>
<script>
export default {
props: {
obj: {
type: Object,
required: true
}
}
}
</script>
```
2. 子组件通过 emit 事件传递对象参数给父组件
子组件中:
```html
<template>
<button @click="handleClick">Click me</button>
</template>
<script>
export default {
data() {
return {
obj: {
name: 'Vue',
version: '3.0.0'
}
}
},
methods: {
handleClick() {
this.$emit('my-event', this.obj)
}
}
}
</script>
```
父组件中:
```html
<template>
<child-component @my-event="handleEvent"></child-component>
</template>
<script>
export default {
methods: {
handleEvent(obj) {
console.log(obj)
}
}
}
</script>
```
以上是两种常见的传递对象参数的方式,你可以根据具体的业务需求选择使用哪种方式。