如何在组件间传递文档ID并在目标组件中使用？

React 场景 #

1. 父子组件直接传值 #

如果两个组件是父子关系，直接用props传最省事：

• 创建文档的父组件：

import ChildComponent from './ChildComponent';

function ParentComponent() {
  // 假设创建文档后拿到的ID
  const docId = 'created-doc-123';

  return (
    <div>
      <ChildComponent docId={docId} />
    </div>
  );
}

• 接收ID的子组件：

function ChildComponent({ docId }) {
  // 直接用docId做业务逻辑
  console.log('当前文档ID:', docId);
  return <div>文档ID：{docId}</div>;
}

2. 非父子/跨层级组件传值 #

用Context API

适合跨多层级的组件共享：

// 先创建Context
import { createContext, useContext } from 'react';

const DocIdContext = createContext(null);

// 顶层组件提供ID
function App() {
  const docId = 'created-doc-123';
  return (
    <DocIdContext.Provider value={docId}>
      {/* 不管嵌套多少层，下面的组件都能拿到 */}
      <DeepNestedComponent />
    </DocIdContext.Provider>
  );
}

// 深层组件获取ID
function DeepNestedComponent() {
  const docId = useContext(DocIdContext);
  return <div>文档ID：{docId}</div>;
}

用状态管理工具（以Zustand为例）

适合大型项目全局共享状态：

// 创建全局store
import { create } from 'zustand';

const useDocStore = create((set) => ({
  docId: null,
  setDocId: (id) => set({ docId: id })
}));

// 创建文档的组件存ID
function CreateDocComponent() {
  const setDocId = useDocStore((state) => state.setDocId);
  
  const handleCreateDoc = () => {
    // 模拟接口返回的文档ID
    const newDocId = 'new-doc-456';
    setDocId(newDocId);
  };

  return <button onClick={handleCreateDoc}>创建文档</button>;
}

// 另一个组件取ID用
function UseDocComponent() {
  const docId = useDocStore((state) => state.docId);
  return <div>当前文档ID：{docId}</div>;
}

Vue 场景 #

1. 父子组件传值 #

• 创建文档的父组件：

<template>
  <ChildComponent :doc-id="docId" />
</template>

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

// 创建文档后赋值的ID
const docId = ref('created-doc-123');
</script>

• 接收ID的子组件：

<template>
  <div>当前文档ID：{{ docId }}</div>
</template>

<script setup>
const props = defineProps({
  docId: String
});

// 直接用props.docId做逻辑
console.log('文档ID:', props.docId);
</script>

2. 非父子/跨层级组件传值 #

用Pinia状态管理

// 创建全局store
import { defineStore } from 'pinia';

export const useDocStore = defineStore('doc', {
  state: () => ({
    docId: null
  }),
  actions: {
    setDocId(id) {
      this.docId = id;
    }
  }
});

// 创建文档的组件存ID
<script setup>
import { useDocStore } from '@/stores/doc';
const docStore = useDocStore();

const handleCreateDoc = () => {
  const newDocId = 'new-doc-456';
  docStore.setDocId(newDocId);
};
</script>

// 另一个组件取ID
<script setup>
import { useDocStore } from '@/stores/doc';
const docStore = useDocStore();
</script>

<template>
  <div>当前文档ID：{{ docStore.docId }}</div>
</template>

用Provide/Inject

适合跨层级共享，不需要全局状态的场景：

• 顶层组件提供ID：

<script setup>
import { provide, ref } from 'vue';
const docId = ref('created-doc-123');
provide('docId', docId);
</script>

• 深层组件注入ID：

<script setup>
import { inject } from 'vue';
const docId = inject('docId');
</script>

<template>
  <div>文档ID：{{ docId }}</div>
</template>

路由跳转场景 #

如果两个组件是通过路由切换的，把ID放在路由参数里最直接：

React Router #

• 创建文档后跳转传ID：

import { useNavigate } from 'react-router-dom';

function CreateDocComponent() {
  const navigate = useNavigate();
  
  const handleCreateDoc = () => {
    const docId = 'created-doc-123';
    navigate(`/doc-detail/${docId}`);
  };
}

• 目标组件接收ID：

import { useParams } from 'react-router-dom';

function DocDetailComponent() {
  const { docId } = useParams();
  return <div>文档ID：{docId}</div>;
}

Vue Router #

• 创建文档后跳转传ID：

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();

const handleCreateDoc = () => {
  const docId = 'created-doc-123';
  // 路径参数方式
  router.push({ path: `/doc-detail/${docId}` });
  // 或者用query参数：router.push({ path: '/doc-detail', query: { docId } })
};
</script>

• 目标组件接收ID：

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();

// 路径参数取值
const docId = route.params.docId;
// query参数取值：route.query.docId
</script>

内容的提问来源于stack exchange，提问作者Bharath k