vue3 setup 语法糖 怎么获取父级组件给子组件的prop

在 Vue3 中，`setup` 函数是 Composition API 的核心部分，它提供了一种更简洁、更模块化的编写组件的方式。如果你想要从父组件向子组件传递 prop（属性），在 `setup` 函数中可以通过 `ref` 或者直接访问 `this.$props` 来获取。

**1. 使用 ref接收 prop**

import { ref } from 'vue';

// 在子组件的 setup 函数中
setup() {
  const parentValue = ref(null); // 假设父组件传来的 prop 名为 "parentValue"
  
  onMounted(() => {
    console.log('Parent value:', parentValue.value); // 当 prop 更新时，会自动更新
  })

  return {
    // 在模板中使用 this.parentValue
    parentValue,
  };
}

**2. 直接访问 prop**
如果 prop 是必需的并且不需要缓存值，也可以直接在模板或计算属性中使用 `$props` 对象：

setup() {
  // 直接访问父组件的 prop
  console.log('Parent value:', this.$props.parentValue);
  
  // ...
}

注意，`$props` 只能在组件的 `setup` 函数内部和模板中使用，因为它是在组件渲染上下文中可用的。如果父组件未传值，则 `parentValue` 或 `this.$props.parentValue` 将为 undefined。