Angular开发经常涉及到组件间传递参数，用原生js开发时，如何解决这些问题？

在 Angular 等框架中，组件间通信通常通过输入属性（@Input）、输出事件（@Output）或服务（Service）实现。而在原生 JavaScript 开发中，没有这些内置机制，但可以通过以下方式模拟类似功能：

---

一、组件间通信的常见场景

1. 父组件向子组件传递数据
2. 子组件向父组件发送事件
3. 非父子组件间的通信

---

二、原生 JavaScript 实现方案

1. 父组件向子组件传递数据

通过动态渲染子组件时传入数据（类似 React 的 props 或 Angular 的 @Input）。

示例：

// 子组件定义
class ChildComponent {constructor(data) {this.data = data;this.render();}render() {const childDiv = document.createElement('div');childDiv.innerHTML = `子组件收到数据: ${this.data}`;document.body.appendChild(childDiv);}
}// 父组件初始化子组件并传参
const parentData = 'Hello from Parent';
new ChildComponent(parentData);

2. 子组件向父组件发送事件

通过回调函数或自定义事件（CustomEvent）实现。

方案 1：回调函数

// 父组件定义回调
function handleChildEvent(data) {console.log('父组件收到子组件事件:', data);
}// 子组件触发回调
class ChildComponent {constructor(onEvent) {this.onEvent = onEvent;this.button = document.createElement('button');this.button.textContent = '触发事件';this.button.addEventListener('click', () => this.onEvent('Data from Child'));document.body.appendChild(this.button);}
}// 初始化子组件并传入回调
new ChildComponent(handleChildEvent);

方案 2：自定义事件

// 子组件派发事件
class ChildComponent {constructor() {this.button = document.createElement('button');this.button.textContent = '触发事件';this.button.addEventListener('click', () => {const event = new CustomEvent('childEvent', {detail: { data: 'Data from Child' }});document.dispatchEvent(event);});document.body.appendChild(this.button);}
}// 父组件监听事件
document.addEventListener('childEvent', (e) => {console.log('父组件收到事件:', e.detail.data);
});// 初始化子组件
new ChildComponent();

3. 非父子组件间的通信

通过全局事件总线或状态管理对象实现。

方案 1：全局事件总线

// 创建事件总线
const eventBus = new EventTarget();// 组件 A 发送事件
eventBus.dispatchEvent(new CustomEvent('update', {detail: { message: 'Hello from Component A' }
}));// 组件 B 监听事件
eventBus.addEventListener('update', (e) => {console.log('组件 B 收到消息:', e.detail.message);
});

方案 2：状态管理对象

// 共享状态对象
const state = {data: null,listeners: [],subscribe(callback) {this.listeners.push(callback);},setData(newData) {this.data = newData;this.listeners.forEach(callback => callback(newData));}
};// 组件 A 更新状态
state.setData('New Data');// 组件 B 订阅状态变化
state.subscribe((data) => {console.log('状态更新:', data);
});

三、进阶优化

1. 模块化组件
   将组件封装为 ES6 类或模块，避免全局污染：

   // ChildComponent.js
   export class ChildComponent {constructor(onEvent) { /* ... */ }
   }

2. 使用发布-订阅模式
   实现更灵活的事件管理（如 EventEmitter）：

   class EventEmitter {constructor() {this.events = {};}on(event, callback) { /* ... */ }emit(event, data) { /* ... */ }
   }

3. 虚拟 DOM 库（可选）
   复杂应用可引入轻量级库（如 Preact）简化 DOM 操作。

---

四、总结

原生 JavaScript 中组件通信的核心思路：

• 数据流：通过函数参数或属性传递数据。
• 事件流：通过回调函数或自定义事件实现通信。
• 状态共享：通过全局对象或事件总线管理跨组件状态。

虽然原生实现需要更多手动管理，但能深入理解框架背后的设计原理。对于复杂项目，建议逐步引入框架以提高开发效率。