Custom Elements 中的 ref & $emit 实践

随着 Web 开发技术的不断更新，越来越多的前端开发者开始使用 Custom Elements 来创建自定义组件。Custom Elements 是 Web Components 规范的一部分，它允许开发者创建自定义的 HTML 元素，这些元素可以像普通 HTML 元素一样使用。在 Custom Elements 中，ref 和 $emit 是两个常见的 API，它们可以帮助我们更好地管理组件的状态和事件。

ref

ref 是 Custom Elements 中用于引用组件内部元素的 API。使用 ref 可以让我们在组件内部轻松地访问和操作子元素，而不需要使用复杂的 DOM 操作。下面是一个简单的示例：

<my-component>
  <div ref="container"></div>
</my-component>

在上面的代码中，我们定义了一个名为 container 的 div 元素，并使用 ref 属性将其引用。在组件内部，我们可以使用 this.$refs.container 访问这个元素，并对它进行操作。例如，我们可以在组件的 created 钩子函数中设置 container 元素的样式：

// javascriptcn.com 代码示例
class MyComponent extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.created();
  }

  created() {
    this.$refs.container.style.backgroundColor = 'red';
  }

  get $refs() {
    return {
      container: this.querySelector('[ref="container"]')
    };
  }
}

在上面的代码中，我们通过 get $refs 方法返回了一个包含所有 ref 元素的对象。在 created 钩子函数中，我们可以轻松地访问 container 元素，并设置它的样式。

$emit

$emit 是 Custom Elements 中用于触发事件的 API。使用 $emit 可以让我们在组件内部轻松地触发自定义事件，并在父组件中监听这些事件。下面是一个简单的示例：

<my-component></my-component>

在上面的代码中，我们定义了一个名为 my-component 的自定义元素。在组件内部，我们可以使用 $emit 方法触发一个名为 my-event 的自定义事件：

// javascriptcn.com 代码示例
class MyComponent extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.created();
  }

  created() {
    this.$emit('my-event');
  }

  $emit(name, data) {
    const event = new CustomEvent(name, {
      bubbles: true,
      detail: data
    });
    this.dispatchEvent(event);
  }
}

在上面的代码中，我们通过 $emit 方法触发了一个名为 my-event 的自定义事件，并传递了一个可选的数据参数。在 $emit 方法内部，我们创建了一个 CustomEvent 对象，并使用 dispatchEvent 方法触发了这个事件。在父组件中，我们可以监听这个事件：

const myComponent = document.querySelector('my-component');
myComponent.addEventListener('my-event', () => {
  console.log('my-event triggered');
});

在上面的代码中，我们使用 addEventListener 方法监听了 my-event 事件，并在事件触发时打印了一条消息。

总结

通过使用 ref 和 $emit，我们可以更好地管理 Custom Elements 中的状态和事件。使用 ref 可以让我们轻松地访问和操作子元素，而不需要使用复杂的 DOM 操作。使用 $emit 可以让我们在组件内部轻松地触发自定义事件，并在父组件中监听这些事件。在实际开发中，我们可以结合这两个 API，创建更加灵活和易于维护的 Custom Elements 组件。

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