vue 父子间传值-传递对象

作者: 逸笛 | 来源:发表于2021-03-10 11:36 被阅读0次

父：page下的页面

<div style="width: 600px;height: 400px;border: 1px solid red;">
 <span style="font-size: 30px;">父组件区域：</span>
 <div>传给子组件的值【toChildrenData】：{{toChildrenData}}</div>
 <div>
   <children :toChildrenData="toChildrenData"></children>
 </div>
</div>


data () {
 // 这里存放数据
 return {
   toChildrenData: {
     name: '李四',
     age: 22
   }
 }
}

子：组件 components下的组件

<template>
  <div class="" style="width: 400px;height: 300px;margin: 30px auto;border: 1px solid #0000ff">
    <span style="font-size: 30px;">子组件区域：</span>
    <div>父组件传过来的值【toChildrenData】：{{toChildrenData}}</div>
    <input type="text" v-model="toChildrenData.name">
  </div>
</template>


props: {
  toChildrenData: {
    type: Object,
    default () {
      return {}
    }
  }
},