vue3 子组件接收父组件props获取

在Vue 3中，子组件接收父组件传递的props有一些不同于Vue 2的方式。以下是几种常见的子组件获取父组件props的方法：

1. 使用`props`选项声明：在子组件的选项中使用`props`来声明接收的属性，并指定父组件传递的props的类型。

// 子组件
export default {
  props: {
    message: String // 指定message属性为字符串类型
  }
}

在父组件中使用子组件并传递props：

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

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

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

2. 使用`v-bind`指令：通过在子组件上使用`v-bind`指令将父组件的属性动态绑定到子组件上。

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

<script>
export default {
  props: ['message']
}
</script>

在父组件中使用子组件并传递props：

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

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

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

这些是Vue 3中子组件接收父组件props的常见方式，你可以根据实际情况选择适合的方法。