Web Components 与组件间通信实战-JavaScript中文网-JavaScript教程资源分享门户

Web Components 是一种利用浏览器提供的原生 Web 技术，如 Custom Elements、Shadow DOM 和 HTML Templates 等，实现模块化的组件化开发方案。组件化开发旨在提高前端开发效率和代码可维护性，而组件间通信则是组件化开发中不可或缺的一部分。

在本篇文章中，我们将介绍 Web Components 中常用的组件间通信方式及实战应用。

EventBus 事件总线

EventBus 是一种事件机制，将事件触发者和事件监听者解耦。每个组件都可以触发事件，其他组件可以监听该事件并进行响应。

EventBus 实现

以下是一个简单的 EventBus 实现。

// www.javascriptcn.com code example
class EventBus {
  // 观察者列表
  static observers = new Map()

  // 订阅事件
  static on(event, observer) {
    if (!this.observers.has(event)) {
      this.observers.set(event, [])
    }
    this.observers.get(event).push(observer)
  }

  // 触发事件
  static emit(event, data) {
    if (this.observers.has(event)) {
      const observers = this.observers.get(event)
      observers.forEach(observer => observer(data))
    }
  }
}

EventBus 实战

我们假设有两个组件：<parent-component> 和 <child-component>，分别代表父子组件。当 <parent-component> 组件中的按钮被点击时，需要在 <child-component> 组件中显示对应的人名。

那么，我们可以通过 EventBus 实现组件间通信，具体步骤如下：

在 <parent-component> 中，绑定按钮点击事件，并触发 showName 事件。

<parent-component>
  <button @click=${() => EventBus.emit('showName', '张三')}>点击</button>
</parent-component>

在 <child-component> 中，监听 showName 事件，并显示对应的人名。

// www.javascriptcn.com code example
<child-component>
  <div id="name"></div>
</child-component>

<script>
  EventBus.on('showName', name => {
    const nameDiv = document.querySelector('#name')
    nameDiv.innerHTML = name
  })
</script>

Props 属性传递

Props 是把父组件中数据传递给子组件的一种方式。子组件通过 props 访问父组件传递的数据。可以理解为在 Vue 或 React 中组件传值的方式。

Props 实现

以下是一个简单的 Props 实现。

// www.javascriptcn.com code example
class Component {
  // props
  props = {}

  // 设置 props
  setProps(props) {
    this.props = props
  }

  // 获取 props
  getProps() {
    return this.props
  }
}

Props 实战

我们假设有两个组件：<parent-component> 和 <child-component>，分别代表父子组件。在 <parent-component> 中，有一个名为 name 的数据，需要传递给 <child-component> 并显示出来。

那么，我们可以通过 Props 实现组件间通信，具体步骤如下：

在 <parent-component> 中，设置 name 数据，并将其通过 props 传递给 <child-component>。

// www.javascriptcn.com code example
<parent-component>
  <script>
    const parentComponent = document.querySelector('parent-component')

    // 设置 props
    const props = {
      name: '张三'
    }
    parentComponent.setProps(props)
  </script>
</parent-component>

在 <child-component> 中，通过 props 获取 name 数据，并显示出来。

// www.javascriptcn.com code example
<child-component>
  <div id="name"></div>

  <script>
    const childComponent = document.querySelector('child-component')

    // 获取 props
    const props = childComponent.getProps()

    const nameDiv = document.querySelector('#name')
    nameDiv.innerHTML = props.name
  </script>
</child-component>

Pub/Sub 发布订阅模式

Pub/Sub 是一种消息机制，将发布者和订阅者解耦。每个组件都可以发布消息，其他组件可以订阅该消息并进行响应。

Pub/Sub 实现

以下是一个简单的 Pub/Sub 实现。

// www.javascriptcn.com code example
class PubSub {
  // 消息列表
  static messages = {}

  // 订阅消息
  static subscribe(message, subscriber) {
    if (!this.messages[message]) {
      this.messages[message] = []
    }
    this.messages[message].push(subscriber)
  }

  // 发布消息
  static publish(message, data) {
    if (this.messages[message]) {
      const subscribers = this.messages[message]
      subscribers.forEach(subscriber => subscriber(data))
    }
  }
}

Pub/Sub 实战

那么，我们可以通过 Pub/Sub 实现组件间通信，具体步骤如下：

在 <parent-component> 中，绑定按钮点击事件，并发布 showName 消息。

<parent-component>
  <button @click=${() => PubSub.publish('showName', '张三')}>点击</button>
</parent-component>

在 <child-component> 中，订阅 showName 消息，并显示对应的人名。

// www.javascriptcn.com code example
<child-component>
  <div id="name"></div>
</child-component>

<script>
  PubSub.subscribe('showName', name => {
    const nameDiv = document.querySelector('#name')
    nameDiv.innerHTML = name
  })
</script>

Conclusion

以上就是 Web Components 中组件间通信的三种常用方式，分别是 EventBus、Props 和 Pub/Sub。在实际开发中，可以根据具体场景选择不同的方式，或结合多种方式来实现组件间通信。通过组件间通信，可以实现功能的拆分，提高代码的可维护性和重用性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cf9ceee46428fe9eb4381c

Web Components 与组件间通信实战