Custom Elements 中如何处理父组件与子组件通信-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常会遇到需要组件间通信的场景。而在使用 Custom Elements 进行组件开发时，如何处理父组件和子组件的通信是一个必须要掌握的技能。下面将介绍通过一些案例来详细探讨如何有效地处理这个问题。

为什么需要处理通信问题

在前端页面中，通常需要将复杂的页面拆分成多个组件，以提高开发效率和代码复用率。如下示例中，父组件 my-form 包含两个子组件 my-input 和 my-button：

<my-form>
  <my-input label="姓名"></my-input>
  <my-input label="年龄"></my-input>
  <my-button>提交</my-button>
</my-form>

其中 my-form 负责管理整个表单的状态，my-input 负责收集输入数据，my-button 负责提交表单数据。这三个组件之间需要进行协调和通信来完成整个表单的功能。

通信方式

常见的组件间通信方式有以下三种：

Props

在本例中，可以通过 props 将表单数据传递给子组件，如将 my-form 中的数据作为 my-input 的属性传递过去：

<my-form>
  <my-input label="姓名" :value="formData.name" @change="updateFormData('name', $event)"></my-input>
  <my-input label="年龄" :value="formData.age" @change="updateFormData('age', $event)"></my-input>
  <my-button @click="submitFormData">提交</my-button>
</my-form>

其中 :value="formData.name" 表示将 formData 中的 name 值作为 my-input 的 value 属性传递过去。在子组件中，可以通过 props 来获取传递过来的值：

// javascriptcn.com 代码示例
class MyInput extends HTMLElement {
  // ...
  static get observedAttributes() { return ['label', 'value']; }

  // ...

  connectedCallback() {
    this.render();
    this.addEventListener('input', e => {
      this.dispatchEvent(new CustomEvent('change', { detail: e.target.value }));
    });
  }

  render() {
    this.innerHTML = `
      <label>${this.label}</label>
      <input value="${this.value}">
    `;
  }
}

// ...

customElements.define('my-input', MyInput);

Events

在子组件中触发事件，父组件监听事件来获取数据，如 my-input 中的 change 事件。在父组件中，监听子组件的事件来获取子组件的数据：

// javascriptcn.com 代码示例
class MyForm extends HTMLElement {
  // ...

  connectedCallback() {
    this.render();
    this.querySelector('my-button').addEventListener('click', () => {
      const formData = {
        name: this.querySelector('[label=姓名]').value,
        age: this.querySelector('[label=年龄]').value,
      };
      this.dispatchEvent(new CustomEvent('submit', { detail: formData }));
    });
  }

  render() {
    this.innerHTML = `
      <slot></slot>
    `;
  }
}

// ...

customElements.define('my-form', MyForm);

在 my-form 中，通过 this.dispatchEvent(new CustomEvent('submit', { detail: formData })) 触发一个自定义事件，并将表单数据发出去。在父组件中，通过 addEventListener 来监听事件，获取子组件发来的数据。

全局状态管理

使用全局状态管理工具如 Vuex，可以将一些组件状态保存在公共的 Store 中，多个组件通过读取或修改 Store 中的状态来通信。

示例代码

下面给出一个完整的示例代码：

<my-form>
  <my-input label="姓名" :value="formData.name" @change="updateFormData('name', $event)"></my-input>
  <my-input label="年龄" :value="formData.age" @change="updateFormData('age', $event)"></my-input>
  <my-button @click="submitFormData">提交</my-button>
</my-form>

// javascriptcn.com 代码示例
class MyForm extends HTMLElement {
  formData = {};

  connectedCallback() {
    this.render();
    this.querySelector('my-button').addEventListener('click', () => {
      const formData = {
        name: this.querySelector('[label=姓名]').value,
        age: this.querySelector('[label=年龄]').value,
      };
      this.dispatchEvent(new CustomEvent('submit', { detail: formData }));
    });
  }

  updateFormData(name, event) {
    this.formData[name] = event.target.value;
  }

  render() {
    this.innerHTML = `
      <slot></slot>
    `;
  }
}

class MyInput extends HTMLElement {
  label = this.getAttribute('label');
  value = this.getAttribute('value');

  static get observedAttributes() { return ['label', 'value']; }

  connectedCallback() {
    this.render();
    this.addEventListener('input', e => {
      this.dispatchEvent(new CustomEvent('change', { detail: e.target.value }));
    });
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (oldValue !== newValue) {
      this[name] = newValue;
      this.render();
    }
  }

  render() {
    this.innerHTML = `
      <label>${this.label}</label>
      <input value="${this.value}">
    `;
  }
}

class MyButton extends HTMLElement {
  connectedCallback() {
    this.render();
  }

  render() {
    this.innerHTML = `
      <button><slot></slot></button>
    `;
  }
}

customElements.define('my-form', MyForm);
customElements.define('my-input', MyInput);
customElements.define('my-button', MyButton);

const form = document.querySelector('my-form');
form.addEventListener('submit', e => {
  console.log(e.detail);
});

这个代码实现了一个简单的表单组件，包含了父组件和子组件之间的通信。

总结

在使用 Custom Elements 进行组件开发时，处理父组件和子组件之间的通信是一个必须要掌握的技能。通过 props、events 和全局状态管理等方式，可以灵活地处理组件间的数据传递和状态管理，提高组件的复用性和扩展性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653493b77d4982a6eb95df9e