vue3 父子组件传递对象

在 Vue3 中，可以通过 props 将父组件的数据传递给子组件。如果要传递一个对象，可以使用 v-bind 指令将对象作为 prop 的值传递给子组件。在子组件中，可以通过 props 接收这个对象，并在模板中使用它。

例如，父组件中有一个名为 obj 的对象：

<template>
  <child-component :my-obj="obj"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      obj: {
        name: '张三',
        age: 18
      }
    }
  }
}
</script>

在子组件中，可以通过 props 接收这个对象，并在模板中使用它：

<template>
  <div>
    <p>姓名：{{ myObj.name }}</p>
    <p>年龄：{{ myObj.age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    myObj: Object
  }
}
</script>

相关问题

VUE3父子组件传递list

在Vue3中，父子组件之间的数据传递通常通过props或自定义事件来完成。如果你想从父组件向子组件传递一个list数据，可以按照以下步骤操作：

1. **在父组件中定义prop**:
在`<template>`部分，你可以直接将需要传递的数据作为prop传递给子组件：

   <child-component :list="parentList" />

然后，在`<script setup>`部分导出这个list：

   import { ref } from 'vue';
   const parentList = ref([]);

2. **在子组件接收prop**:
子组件的`<template>`里可以这么引用这个prop：

   <div v-for="(item, index) in $props.list" :key="index">{{ item }}</div>

注意要在`<script setup>`中导入并使用`$props`：

   import { props } from 'vue';

   // 使用prop
   const { list } = props;

vue3 父子组件传递数组

在 Vue3 中，可以通过 props 将数组从父组件传递到子组件。具体步骤如下：

1. 在父组件中定义一个数组，并将其作为 props 传递给子组件：

<template>
  <div>
    <child-component :myArray="parentArray"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentArray: [1, 2, 3],
    };
  },
};
</script>

2. 在子组件中，通过 props 接收父组件传递的数组，并在模板中使用：

<template>
  <div>
    <ul>
      <li v-for="item in myArray" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    myArray: {
      type: Array,
      required: true,
    },
  },
};
</script>

这样就可以在子组件中使用父组件传递的数组了。