独立组件交互：点击Component A按钮如何渲染Component B内容？

Hey there! Great question—this is a super common scenario when dealing with unrelated components, and there are a few reliable approaches depending on the framework you're using. Let's walk through the most practical solutions using your Header and Main component example:

1. 使用全局状态管理（推荐用于中大型应用） #

If you're building an app that might scale up, global state management is the most robust approach. The core idea is to store the "should show add column content" state in a centralized store. Your Header component will update this state when the button is clicked, and your Main component will watch for changes to that state and render content accordingly.

React Example (using Zustand, a lightweight state manager) #

First, create your store:

// store.js
import { create } from 'zustand';

export const useAppStore = create((set) => ({
  showAddColumn: false,
  toggleAddColumn: () => set((state) => ({ showAddColumn: !state.showAddColumn }))
}));

Then update your Header component to trigger the state change:

// Header.jsx
import { useAppStore } from './store';

const Header = () => {
  const toggleAddColumn = useAppStore((state) => state.toggleAddColumn);

  return (
    <header>
      <li>hello board</li>
      <ul>
        <li onClick={toggleAddColumn}>add a column</li>
        <li>manage tags</li>
        <li>settings</li>
      </ul>
    </header>
  );
};

Finally, have your Main component listen to the state:

// Main.jsx
import { useAppStore } from './store';

const Main = () => {
  const showAddColumn = useAppStore((state) => state.showAddColumn);

  return (
    <main>
      {showAddColumn && (
        <div>
          <h3>Add New Column</h3>
          <input type="text" placeholder="Enter column name" />
          <button>Save Column</button>
        </div>
      )}
    </main>
  );
};

Vue Example (using Pinia, Vue's official state manager) #

Create your store:

// stores/appStore.js
import { defineStore } from 'pinia';

export const useAppStore = defineStore('app', {
  state: () => ({
    showAddColumn: false
  }),
  actions: {
    toggleAddColumn() {
      this.showAddColumn = !this.showAddColumn;
    }
  }
});

Update the Header component:

<template>
  <header>
    <li>hello board</li>
    <ul>
      <li @click="toggleAddColumn">add a column</li>
      <li>manage tags</li>
      <li>settings</li>
    </ul>
  </header>
</template>

<script setup>
import { useAppStore } from '@/stores/appStore';
const appStore = useAppStore();
const toggleAddColumn = () => appStore.toggleAddColumn();
</script>

And the Main component:

<template>
  <main>
    <div v-if="appStore.showAddColumn">
      <h3>Add New Column</h3>
      <input type="text" placeholder="Enter column name" />
      <button>Save Column</button>
    </div>
  </main>
</template>

<script setup>
import { useAppStore } from '@/stores/appStore';
const appStore = useAppStore();
</script>

2. 事件总线（适合小型应用或快速原型） #

If you don't want to add a state management library, an event bus works well for small apps or quick prototypes. You'll create a global event emitter that your Header uses to trigger an event, and your Main component listens for that event to update its local state.

React Example (using custom window events) #

First, create your event bus utility:

// eventBus.js
const eventBus = {
  on(event, callback) {
    window.addEventListener(event, callback);
  },
  emit(event, data) {
    window.dispatchEvent(new CustomEvent(event, { detail: data }));
  },
  off(event, callback) {
    window.removeEventListener(event, callback);
  }
};

export default eventBus;

Update the Header to emit the event:

// Header.jsx
import eventBus from './eventBus';

const Header = () => {
  const handleAddClick = () => {
    eventBus.emit('toggle-add-column');
  };

  return (
    <header>
      <li>hello board</li>
      <ul>
        <li onClick={handleAddClick}>add a column</li>
        <li>manage tags</li>
        <li>settings</li>
      </ul>
    </header>
  );
};

And have Main listen for it:

// Main.jsx
import { useState, useEffect } from 'react';
import eventBus from './eventBus';

const Main = () => {
  const [showAddColumn, setShowAddColumn] = useState(false);

  useEffect(() => {
    const handleToggle = () => {
      setShowAddColumn(prev => !prev);
    };
    eventBus.on('toggle-add-column', handleToggle);
    // Clean up the listener to avoid memory leaks
    return () => eventBus.off('toggle-add-column', handleToggle);
  }, []);

  return (
    <main>
      {showAddColumn && (
        <div>
          <h3>Add New Column</h3>
          {/* Your column content here */}
        </div>
      )}
    </main>
  );
};

Vue Example (using mitt library for Vue 3) #

First, install mitt (npm install mitt) then create your emitter:

// eventBus.js
import mitt from 'mitt';
export const emitter = mitt();

Update the Header component:

<template>
  <header>
    <li>hello board</li>
    <ul>
      <li @click="emitter.emit('toggle-add-column')">add a column</li>
      <li>manage tags</li>
      <li>settings</li>
    </ul>
  </header>
</template>

<script setup>
import { emitter } from '@/eventBus';
</script>

And the Main component:

<template>
  <main>
    <div v-if="showAddColumn">
      <h3>Add New Column</h3>
      {/* Your column content here */}
    </div>
  </main>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { emitter } from '@/eventBus';

const showAddColumn = ref(false);

onMounted(() => {
  emitter.on('toggle-add-column', () => {
    showAddColumn.value = !showAddColumn.value;
  });
});

onUnmounted(() => {
  emitter.off('toggle-add-column');
});
</script>

3. 框架特定的上下文/依赖注入 #

If you prefer not to use external libraries, you can use your framework's built-in tools for sharing state across components—like React's Context API or Vue's provide/inject. This is great for apps where you don't need a full state management solution but still need to share state between unrelated components.

React Example (Context API) #

First, create your context and provider:

// AppContext.js
import { createContext, useContext, useState } from 'react';

const AppContext = createContext();

export const AppProvider = ({ children }) => {
  const [showAddColumn, setShowAddColumn] = useState(false);

  const toggleAddColumn = () => {
    setShowAddColumn(prev => !prev);
  };

  return (
    <AppContext.Provider value={{ showAddColumn, toggleAddColumn }}>
      {children}
    </AppContext.Provider>
  );
};

export const useAppContext = () => useContext(AppContext);

Wrap your root component with the provider:

// App.jsx
import { AppProvider } from './AppContext';
import Header from './Header';
import Main from './Main';

function App() {
  return (
    <AppProvider>
      <Header />
      <Main />
    </AppProvider>
  );
}

Update the Header to use the context:

// Header.jsx
import { useAppContext } from './AppContext';

const Header = () => {
  const { toggleAddColumn } = useAppContext();

  return (
    <header>
      <li>hello board</li>
      <ul>
        <li onClick={toggleAddColumn}>add a column</li>
        <li>manage tags</li>
        <li>settings</li>
      </ul>
    </header>
  );
};

And the Main component to access the state:

// Main.jsx
import { useAppContext } from './AppContext';

const Main = () => {
  const { showAddColumn } = useAppContext();

  return (
    <main>
      {showAddColumn && (
        <div>
          <h3>Add New Column</h3>
          {/* Your column content here */}
        </div>
      )}
    </main>
  );
};

Vue Example (provide/inject) #

In your root component, provide the state and method:

<!-- App.vue -->
<template>
  <Header />
  <Main />
</template>

<script setup>
import { ref, provide } from 'vue';
import Header from './components/Header.vue';
import Main from './components/Main.vue';

const showAddColumn = ref(false);
const toggleAddColumn = () => {
  showAddColumn.value = !showAddColumn.value;
};

provide('showAddColumn', showAddColumn);
provide('toggleAddColumn', toggleAddColumn);
</script>

Update the Header component to inject the method:

<!-- Header.vue -->
<template>
  <header>
    <li>hello board</li>
    <ul>
      <li @click="toggleAddColumn">add a column</li>
      <li>manage tags</li>
      <li>settings</li>
    </ul>
  </header>
</template>

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

And the Main component to inject the state:

<!-- Main.vue -->
<template>
  <main>
    <div v-if="showAddColumn">
      <h3>Add New Column</h3>
      {/* Your column content here */}
    </div>
  </main>
</template>

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

All of these approaches work—pick the one that fits your app's size and complexity. For most cases, global state management is the best long-term choice, but event buses or context/inject are great for smaller projects.

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