1

我正在学习 Web 组件（本机和框架）。是否可以像在 Vue.js 中那样将属性注入本机组件？

这是 my-component.js：

const templateComponent = document.createElement('template');
templateComponent.innerHTML = `<div>{{ test }}</div>`;

class MyComponent extends HTMLElement {

    connectedCallback() {
        this._container = this.querySelector("DIV");
    }

}

window.customElements.define("my-component", MyComponent);

这是 index.html：

<!doctype html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>

<my-component test="Does this work?"></my-component>


<script src="my-component.js"></script>

</body>
</html>
4

1 回答 1

1

是和不是。

模板没有内置任何内容。但这并不意味着你不能这样做。

function render(el) {
  el.shadowRoot.innerHTML = `<div>${el._test}</div>`;
}

class MyComponent extends HTMLElement {
  static get observedAttributes() {
    return ['test'];
  }

  constructor() {
    super();
    this.attachShadow({mode: 'open'});
  }

  attributeChangedCallback(attrName, oldVal, newVal) {
    if (oldVal !== newVal) {
      this[`_${attrName}`] = newVal;
      render(this);
    }
  }
}

window.customElements.define("my-component", MyComponent);
<my-component test="Does this work?"></my-component>
<my-component test="Yes it does"></my-component>

您用于observedAttributes指示要监视哪些属性的更改。attributeChangedCallback当其中一个发生更改时，您可以用作处理程序。

然后由您决定将属性值放入 DOM。如果 DOM 很简单，你可以像我一样做，每次都重新生成它。

更复杂的事情将需要更复杂的算法。

有些人会告诉你使用 LITHtml。我觉得很烦人。我的大多数组件都非常小，不需要复杂性。

扩展

是的，您可以将回调函数作为字符串传递。换句话说，您将回调函数的名称作为字符串传递，然后在您的组件中调用eval. 但我不会推荐它。这样做有很多限制，可以用于邪恶和邪恶的目的。:)

反而：

  • 在组件上提供一个可以设置为回调函数的属性。
  • 在您将使用回调函数调用的组件上提供一个函数
  • 从组件调度事件并让其addEventListener为您处理。你能提供更多关于你想用这个函数做什么的细节吗

这里有两个有用的问题/答案： *标签中的自定义 Web 组件事件回调函数 *我可以将函数作为属性传递给 Web 组件吗？

更新

当设置了多个属性或属性时，询问了如何避免渲染频率高于需要的问题。这通常被称为“去抖动”。

这是一种选择：

let renderTimeout = null;
function render(el) {
  if (renderTimeout) {
    clearTimeout(renderTimeout);
  }

  renderTimeout = setTimeout(() => {
    el.shadowRoot.innerHTML = `<div>${el._test}</div>`;
  }, 0);
}

这将设置一个0时间超时，这意味着它会尽快发生，通常是在当前代码完成运行后立即发生。然后会发生渲染操作。

于 2019-04-26T15:39:39.987 回答