在Vue 3中，组件之间的数据传递是通过props和emit来实现的。在本篇博客中，我们将探讨如何在Vue 3中传递数据给子组件和从子组件中传递数据回父组件。

1. 传递数据给子组件

要将数据传递给子组件，我们可以使用props属性。下面是一个简单的示例：

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

<script>
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent component!'
    };
  }
});
</script>

在上面的示例中，我们定义了一个名为parentMessage的数据属性，并将其传递给子组件ChildComponent的message属性。子组件可以通过props接收该属性并在其模板中使用。

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

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

export default defineComponent({
  props: {
    message: {
      type: String,
      required: true
    }
  }
});
</script>

在子组件中，我们通过props定义了一个名为message的属性，并指定了它的类型为字符串。在模板中，我们可以直接使用message属性来显示传递过来的值。

2. 从子组件传递数据回父组件

要从子组件传递数据回父组件，我们可以使用$emit方法。下面是一个示例：

<template>
  <div>
    <button @click="sendMessage">Send Message to Parent</button>
  </div>
</template>

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

export default defineComponent({
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child component!');
    }
  }
});
</script>

在上面的示例中，当按钮被点击时，sendMessage方法会调用$emit方法，并传递一个名为message的事件以及要传递给父组件的值。

在父组件中，我们可以监听这个事件，并在触发时执行相应的处理函数。

<template>
  <div>
    <child-component @message="handleMessage"></child-component>
    <p>{{ receivedMessage }}</p>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const receivedMessage = ref('');

    const handleMessage = (message) => {
      receivedMessage.value = message;
    };

    return {
      receivedMessage,
      handleMessage
    };
  }
});
</script>

在上面的示例中，我们通过@message监听了子组件触发的message事件，并在handleMessage方法中接收传递过来的值，并将其赋值给receivedMessage属性。

这样，我们就可以实现在Vue 3中传递数据给子组件和从子组件传递数据回父组件的功能了。

以上就是关于Vue 3组件传值的简单介绍。希望对您有所帮助！