-1

我很难解释这一点。我正在构建一个自定义组件，在这个组件中有一个按钮。我需要能够动态设置该按钮的单击操作，以便其操作可以根据上下文进行更改。因此，如果此组件有 2 个实例 a&b，则每个实例都有不同的功能，当单击其中的按钮时会执行该功能。我以为我可以将一个函数分配给组件的属性并从组件内部执行该属性，如下所示：

window.customElements.define('xmp-1', class xmp1 extends HTMLElement{
  constructor(){super();}
  connectedCallback(){
    this.innerHTML = `
      <div>
        <div id='test' style='width:70px; border:solid thin black;'>test button</div>
      </div>`;
    this.querySelector('#test').addEventListener('click', function(){
      console.log('test action');
      this.action1();
    });
  }
});

document.querySelector('xmp-1').action1 = function(){
  console.log("this is the callback");
};
<xmp-1></xmp-1>

但是当你运行它时，你会得到一个错误，说该属性action1不存在。

设置允许我需要的灵活性的回调的正确方法是什么？

4

1 回答 1

0

更新：请尝试下面的代码，我在其中添加了一个绑定语句来绑定“this”

<!DOCTYPE html>
<html>
<head>
    <title>
    </title>
</head>
<body>
    <xmp-1></xmp-1>
    <script>
        document.querySelector('xmp-1').action1 = function(){
            console.log("this is the callback");
        };
        window.customElements.define('xmp-1', class xmp1 extends HTMLElement {
            constructor() { super(); 
                this.handler = this.handler.bind(this);
            }
            handler() {
                console.log("this is the test");
                console.log('test action');
                this.action1();
            }

            connectedCallback() {
                this.innerHTML = `<div>
                    <div id='test' style='width:70px; border:solid thin black;'>test button</div>
                    </div>`;
                this.querySelector('#test').addEventListener('click',this.handler);
            }
        });
    </script>
</body>
</html>

请在您的代码中将 xmp-1更改为#test，如下所示，

<!DOCTYPE html>
<html>
<head>
    <title>
    </title>
</head>
<body>
    <xmp-1></xmp-1>
    <script>
        window.addEventListener('load', (event) => {

            document.querySelector('#test').action1 = function(){
                console.log("this is the callback");
            };

        });
        window.customElements.define('xmp-1', class xmp1 extends HTMLElement {
            constructor() { super(); }

            connectedCallback() {
                this.innerHTML = `<div>
                    <div id='test' style='width:70px; border:solid thin black;'>test button</div>
                    </div>`;
                this.querySelector('#test').addEventListener('click', function () {
                    console.log('test action');
                    this.action1();
                });
            }
        });
    </script>
</body>
</html>

或者请尝试如下所示的方法 2，您必须在其中添加一个名为this.querySelector('#test').action1的函数到您的自定义元素。

<!DOCTYPE html>
<html>
<head>
    <title>
    </title>
</head>
<body>
    <xmp-1></xmp-1>
    <script>
        window.customElements.define('xmp-1', class xmp1 extends HTMLElement {
            constructor() { super(); }

            connectedCallback() {
                this.innerHTML = `<div>
                    <div id='test' style='width:70px; border:solid thin black;'>test button</div>
                    </div>`;
                this.querySelector('#test').addEventListener('click', function () {
                    console.log('test action');
                    this.action1();
                });
                this.querySelector('#test').action1 = function() {
                    console.log('test action1');
                }
            }
        });
    </script>
</body>
</html>
于 2020-07-30T19:05:21.933 回答