vue往子组件传个对象,子组件展示在input框里
时间: 2023-08-18 17:15:08 浏览: 46
可以通过 props 将对象传递给子组件,然后在子组件中使用 v-model 指令绑定到 input 元素上。
在父组件中:
```html
<template>
<div>
<child-component :my-object="myObject"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
myObject: {
name: 'John',
age: 30
}
}
}
}
</script>
```
在子组件中:
```html
<template>
<div>
<input v-model="myObject.name">
<input v-model="myObject.age">
</div>
</template>
<script>
export default {
props: ['myObject']
}
</script>
```
这样就可以将父组件中的对象传递给子组件,并在子组件中展示在 input 框里。注意,当在子组件中修改 input 框的值时,会直接修改父组件中的对象。如果不想直接修改父组件中的对象,可以在子组件中使用计算属性或者方法对传递的对象进行克隆。