vue3孙页面获取父页面参数

在Vue3中，子组件想要从父组件获取参数通常通过props传递。以下是步骤：

1. **设置prop**：在父组件（通常是App.vue或其他顶级组件）中，将需要传递给子组件的参数作为props定义：

<template>
  <div>
    <ChildComponent :param="parentParam" />
  </div>
</template>

<script>
export default {
  components: { ChildComponent },
  data() {
    return {
      parentParam: '默认值', // 可以是字符串、对象或任何JavaScript数据类型
    };
  },
};
</script>

2. **接收prop**：在子组件（ChildComponent.vue）的`setup()`函数或模板中，通过 prop 的名称 `parentParam` 接收这个参数：

<script setup>
import { ref } from 'vue';

const param = ref(props.param); // 使用ref来动态获取并处理prop
// 现在你可以使用param变量了
</script>

<!-- 或者在模板中直接使用 -->
<template>
  <div>子组件接收到的参数: {{ param.value }}</div>
</template>

如果你需要实时更新，记得在父组件改变`parentParam`时通知子组件。可以使用`$emit`触发自定义事件，然后在子组件的`setup`或`methods`中监听这个事件。