vue3 父组件向子组件传递对象

在 Vue 3 中，可以通过 props 将父组件中的对象传递给子组件。

1. 在父组件中定义一个对象：

<template>
  <div>
    <child-component :myObject="parentObject"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentObject: {
        name: "John",
        age: 30
      }
    }
  }
}
</script>

2. 在子组件中声明 props：

<template>
  <div>
    <p>Name: {{ myObject.name }}</p>
    <p>Age: {{ myObject.age }}</p>
  </div>
</template>

<script>
export default {
  props: {
    myObject: {
      type: Object,
      required: true
    }
  }
}
</script>

3. 在子组件中使用父组件传递的对象。

通过这种方式，父组件中的对象可以在子组件中进行使用。注意，在子组件中声明 props 时需要指定类型和是否必需。

相关问题

vue3 子组件向父组件传递对象

在Vue3中，子组件向父组件传递对象的方法与传递参数类似。可以通过`$emit`方法将对象作为参数传递给父组件，然后在父组件中通过监听子组件的事件来接收传递过来的对象。

下面是一个示例代码，演示了Vue3中子组件向父组件传递对象的过程：

子组件ChildComponent.vue：

<template>
  <button @click="sendObject">传递对象给父组件</button>
</template>

<script>
export default {
  methods: {
    sendObject() {
      const obj = { name: 'John', age: 25 };
      this.$emit('sendObject', obj);
    }
  }
}
</script>

父组件中使用子组件并接收传递的对象：

<template>
  <div>
    <child-component @sendObject="handleObject"></child-component>
    <p>接收到的对象：{{ receivedObject }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedObject: null
    }
  },
  methods: {
    handleObject(obj) {
      this.receivedObject = obj;
    }
  }
}
</script>

在上述示例中，子组件通过`$emit`方法将一个对象传递给父组件，父组件通过监听子组件的`sendObject`事件来接收传递过来的对象，并将其赋值给`receivedObject`属性。最终，在父组件的模板中可以显示接收到的对象。

vue3父组件向子组件传递参数

在Vue 3中，父组件向子组件传递参数的方式主要有以下两种：

1.使用v-bind绑定数值，然后通过props在子组件中接收使用。具体步骤如下：[^1]

- 在父组件中，使用v-bind将数值绑定到子组件上：

<template>
  <div>
    <child-component :message="msg"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      msg: '父组件向子组件传参示例'
    }
  }
}
</script>

- 在子组件中，使用props定义接收的属性名称，然后通过template中的插值语法将props中的数值显示出来：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue';

export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    return {
      message: props.message
    }
  }
}
</script>

2.使用defineProps在子组件中定义props属性，然后在父组件中通过v-bind绑定数据到子组件的props属性中。具体步骤如下：

- 在子组件中，使用defineProps定义props属性接收父组件传递的参数：

<template>
  <div>
    <p>{{ type }}</p>
  </div>
</template>

<script>
import { defineProps } from 'vue';

export default {
  name: 'ChildComponent',
  emits: ['update:type'],
  props: defineProps({
    type: {
      type: String,
      default: 'edit'
    }
  }),
  methods: {
    updateType() {
      this.$emit('update:type', 'update');
    }
  }
}
</script>

- 在父组件中，使用v-bind绑定数值到子组件的props属性中，并在需要更新时使用v-on监听子组件的自定义事件来进行更新。

<template>
  <div>
    <child-component :type="type" @update:type="handleUpdate"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      type: 'edit'
    }
  },
  methods: {
    handleUpdate(data) {
      this.type = data;
    }
  }
}
</script>