---
sidebar_position: 4
title: Communicate
---

# Communicate

## Props

In Modern.js, the sub-application will be wrapped into a React component, and the purpose of communicating between the main application and the sub-application can be achieved directly by passing'props' to the React component.

```tsx title=Main: App.tsx
function App() {
  const { MApp } = useModuleApps();

  return (
    <div>
      <MApp count={100} />
    </div>
  );
}
```

```tsx title=Main: App.tsx
function App(props) {
  console.log(props);
  return ...
}
```

The child application will print `{count: 0}`. Currently, child application rendering responsiveness is not supported. Changing the data of'count 'on the main application in time will not trigger a view update

## channel

[Garfish.channel] (https://www.garfishjs.org/api/channel) Used for communication between applications. It is an instance of `EventEmitter2`.

```ts
// sub app listen login event
const App = () => {
  const handleLogin = userInfo => {
    console.log(`${userInfo.name} has login`);
  };

  useEffect(() => {
    window?.Garfish.channel.on('login', handleLogin);
    return () => {
      window?.Garfish.channel.removeListener('login', handleLogin);
    };
  });
};

// main app emit login event
api.getLoginInfo.then(res => {
  if (res.code === 0) {
    window.Garfish.channel.emit('login', res.data);
  }
});
```
