vue3子组件如何从父组件拿到数据

在Vue3中，子组件可以通过props属性从父组件中接收数据。具体来说，父组件可以通过在子组件标签上绑定属性的方式将数据传递给子组件，子组件则可以在props属性中声明需要接收的数据的名称和类型。在子组件中，可以通过this关键字访问props属性来获取父组件传递过来的数据。

另外，在Vue3中，子组件也可以通过$attrs属性获取父组件传递过来的所有属性，包括没有在props属性中声明的属性。这个特性可以用于在子组件中动态绑定属性。

举个例子，如果父组件中有一个名为message的数据需要传递给子组件，可以这样写：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

在子组件中，可以这样声明props属性来接收父组件传递过来的数据：

export default {
  props: {
    message: String
  }
}

子组件可以通过this.message来访问父组件传递过来的数据。